How can I center the text in height inside the col? For example, several col of a fixed height (300px), inside which is some text that needs to be centered on the height of col. Thank!

<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 answers 2

    It is possible so https://codepen.io/anon/pen/PQovJz

     .col { display: flex; height: 300px; } .col p { margin: auto; }

      If you do not affect CSS, and use only Bootstrap, then you just need to add the class 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 centers vertically,
      • mx-auto centers horizontally.