Bootstrap 4 как выложить узкий текст по центру и по вертикали - PullRequest
Новая
       6

Bootstrap 4 как выложить узкий текст по центру и по вертикали

0 голосов
/ 31 мая 2018

Я пытаюсь расположить какой-нибудь текст - заголовок и абзац, но когда я ограничиваю ширину до 50%, скажем, с помощью класса w-50.Текст подпрыгивает, чтобы располагаться горизонтально с заголовком.Попытка изменить направление изгиба и выравнивание по центру оставляет текст и заголовок слева.

Ниже ширины текста 75%, как мне сохранить то же расположение, но установить ширину 50%?https://codepen.io/anon/pen/YvXyzW

<div class="container">
        <div class="row justify-content-center ">
            <h3 class="pt-5 pb-3">How can ExampleSite help you?</h3>
            <p class="feature-summary w-75">
                With us, not only can you find a great deal, but should your prices go up or something
                better
                come
                on
                the market we can find it automatically.
            </p>
        </div>

</div>

1 Ответ

0 голосов
/ 31 мая 2018

Строка является flex-direction: row, поэтому просто измените на flex-direction: column, используя класс flex-column.Используйте align-items-center для центрирования по горизонтали. 

<div class="container">
     <div class="row justify-content-center flex-column align-items-center">
           <h3 class="pt-5 pb-3">How can ExampleSite help you?</h3>
           <p class="feature-summary w-50">
                    ..
          </p>
     </div>
</div>
...