Как выровнять по центру bootstrap

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
16 июля 2024

Можно использовать классы text-center для выравнивания текста, mx-auto для выравнивания блоков по горизонтали и my-auto для выравнивания блоков по вертикали:

  1. Выравнивание текста по центру:

    <div class="text-center">
      <p>Этот текст будет выровнен по центру</p>
    </div>
    
  2. Выравнивание блока по горизонтали:

    <div class="container">
      <div class="row">
        <div class="col-6 mx-auto">
          <p>Этот блок будет выровнен горизонтально по центру</p>
        </div>
      </div>
    </div>
    
  3. Выравнивание блока по вертикали и горизонтали:

    <div class="container">
      <div class="row">
        <div class="col-6 mx-auto my-auto">
          <p>Этот блок будет выровнен по центру по вертикали и горизонтали</p>
        </div>
      </div>
    </div>
    
  4. Центрирование изображения:

    <div class="container">
      <div class="row">
        <div class="col-6 mx-auto">
          <img src="path/to/image.jpg" class="img-fluid d-block mx-auto" alt="Изображение">
        </div>
      </div>
    </div>
    
0 0