Выровняйте элементы с одинаковой начальной точкой

Question

My html выглядит так:

<div class="text-center"> (bootstrap class)
  <p>Username</p>
  <p>Name:</p>
  <p>Last name:</p>
  <p>Email:</p>
</div>

jsfiddle

Я пытаюсь выровнять элементы по центру, но мне нужно, чтобы они начинались одновременно очко:

желаемый вид

Есть ли шанс добиться этого, используя bootstrap?

Answer 1

<div style="display:flex; justify-content:center;">
 <div>
  <p>Username:</p>
  <p>Name:</p>
  <p>Last name:</p>
  <p>Email:</p>
 </div>
</div>

Вам нужно взять .text-center, дополнительную обертку, а затем согнуть центр на внешней обертке. Flex центрирует дополнительную упаковку, которую мы вставили, и выравнивание по умолчанию для этого осталось.