3

Каким образом можно центрировать текст по высоте внутри col? Например, несколько col фиксированной высоты (300px), внутри которых некий текст, который нужно отцентрировать по высоте col. Спасибо!

<div class="container">
<div class="row justify-content-center">
    <div class="col">
        <p>Некоторый текст, который должен быть выровнен не центру колонки.</p>текст, выделенный жирным шрифтом</div>
    <div class="col">
        <p>Некоторый текст, который должен быть выровнен не центру колонки.</p></div>
    <div class="col">
        <p>Некоторый текст, который должен быть выровнен не центру колонки.</p></div>
   </div>
</div>
</div>

2 ответа 2

4

Если не затрагивать CSS, а использовать только Bootstrap, то нужно просто добавить класс my-auto:

    <div class="container">
        <div class="row justify-content-center ">
            <div class="col my-auto">
                <p>Некоторый текст, который должен быть выровнен не центру 
                колонки.</p>текст, выделенный жирным шрифтом</div>
            <div class="col my-auto">
                <p>Некоторый текст, который должен быть выровнен не центру 
                колонки.</p></div>
            <div class="col my-auto">
                <p>Некоторый текст, который должен быть выровнен не центру 
                колонки.</p></div>
           </div>
        </div>
    </div>
  • my-auto центрирует по вертикали,
  • mx-auto центрирует по горизонтали.
2

Можно так https://codepen.io/anon/pen/PQovJz

.col {
  display: flex;
  height: 300px;
}

.col p {
  margin: auto;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.