Начальная загрузка класса .row с display: flex, в результате чего text-align: center не работает с тегами p

Question

Я использую Bootstrap 4 , и у меня есть div с class из row, а внутри у меня есть тег p.

Я добавилID к row div и применяется text-align: center;, но абзац не выравнивается по центру.

Тем не менее, в Chrome Inspector , еслиЯ отключаю display: flex, он выровняется.

Почему это так?

#example {
    text-align: center;
}

<div class="row" id="example">
    <p>Example.</p>
</div>

Answer 1

Как вы уже написали, элемент <p> находится внутри row.Следовательно, для выравнивания текста по центру требуется полная ширина строки, use text-center.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <p class="text-center">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sed nobis ratione natus exercitationem dolores suscipit dolore ab voluptatum expedita quo facilis laboriosam, soluta molestias nemo, possimus excepturi nihil odio! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quas eaque quae id, nam harum assumenda libero molestias aperiam corrupti consequatur, est doloribus vel corporis, ad consequuntur iure tenetur eum commodi!

    </p>
  </div>
</div>

---

Если text-center не работает, используйте один из этих методов

Поскольку <p> является блокомэлемент уровня, вы можете выровнять его по центру родительского элемента, используя mx-auto.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <p class="mx-auto w-50">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sed nobis ratione natus exercitationem dolores suscipit dolore ab voluptatum expedita quo facilis laboriosam, soluta molestias nemo, possimus excepturi nihil odio! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quas eaque quae id, nam harum assumenda libero molestias aperiam corrupti consequatur, est doloribus vel corporis, ad consequuntur iure tenetur eum commodi!

    </p>
  </div>
</div>

---

Строка начальной загрузки flex, используйте justify-content-center, чтобы выровнять все содержимое строки в ее центре.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <p class=" w-50">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sed nobis ratione natus exercitationem dolores suscipit dolore ab voluptatum expedita quo facilis laboriosam, soluta molestias nemo, possimus excepturi nihil odio! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quas eaque quae id, nam harum assumenda libero molestias aperiam corrupti consequatur, est doloribus vel corporis, ad consequuntur iure tenetur eum commodi!

    </p>
  </div>
</div>

Answer 2

Строка используется только для столбцов ...

"Строки являются обертками для столбцов ... Содержимое следует размещать в столбцах, и только столбцы могут быть непосредственными дочерними элементами строк."

Вы должны использовать ...

<div class="row" id="example">
  <div class="col">
    <p class="text-center">Example.</p>
  </div>
</div>

Answer 3

используйте justify-content: center; для отображения: flex items