Bootstrap 4: разница между текстовым центром и выравниванием контента

Question

Кажется, что text-center и justify-content-center делают одно и то же - центрирование текста.Но какая разница?

Answer 1

текст-центр

Свойство text-align CSS определяет горизонтальное выравнивание встроенного блока или ячейки таблицы. Это означает, что оно работает как вертикальное выравнивание, но в горизонтальном направлении. - MDN

.text-center {
  text-align: center !important;
}

text-center выравнивает inline и элемент table-cell в центре элемента, для которого вы его используете. Это не меняет выравнивание элементов block . Элемент контейнера должен иметь свойство width, означающее, что вы не можете использовать его для inline элементов.

---

оправдает-контент-центр

Элементы упакованы заподлицо друг с другом по направлению к центру юстировочного контейнера вдоль главной оси.

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

Для того, чтобы это работало, вам также нужно использовать d-flex. Он выравнивает все содержимое элемента ( inline , block и flex ), для которого вы используете его, по центру элемента. По умолчанию содержимое элемента центрируется по горизонтали, если вы не изменили flex-direction элемента.

---

Вы можете найти эти ссылки полезными.

• Встроенный элемент

• Элемент блока

• Гибкая компоновка коробки

Answer 2

Bootstrap 4 не поддерживает justify-text-center.

Источник: Текст

---

Возможно, вы ищете что-то вроде этого:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

<p class="text-center">Center aligned text on all viewport sizes.</p>

---

Я имел в виду, justify-content-center

Разница в том, что justify-content-* используется для изменениявыравнивание flex предметов.

Если у div нет свойства display: flex.Это не похоже на работу.В то время как text-center не требуется свойство display: flex.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <div style="background-color: red;">Item 1</div>
  <div style="background-color: yellow;">Item 2</div>
  <div style="background-color: blue;">Item 3</div>
</div>

<hr />

<div class="justify-content-center">
  <div style="background-color: red;">Item 1</div>
  <div style="background-color: yellow;">Item 2</div>
  <div style="background-color: blue;">Item 3</div>
</div>