Как я могу центрировать изображение в Bootstrap?

Я изо всех сил пытаюсь центрировать изображение, используя только CSS-классы Bootstrap. Я уже попробовал несколько вещей. Одним из них было добавление Bootstrap CSS-класса mx-auto к элементу img, но это ничего не делает.

Помощь приветствуется.

<div class="container">
    <div class="row">
        <div class="col-4 mx-auto">
            <img class=""...> <!-- center this image within the column -->

            <form...>

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

Ответы

Ответ 1

Изображение по умолчанию отображается как встроенный блок, вам нужно отобразить его как блок, чтобы центрировать его с помощью .mx-auto. Это можно сделать со встроенным .d-block:

<div class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

Или оставьте его как встроенный блок и заверните его в div с помощью .text-center:

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">
            <img src="..."> 
          </div>     
        </div>
    </div>
</div>

Я сделал fiddle, показывая оба пути. Они документированы здесь.

Ответ 2

Поскольку img является встроенным элементом, просто используйте text-center в нем контейнер. Использование mx-auto также приведет к центру контейнера (столбца).

<div class="row">
    <div class="col-4 mx-auto text-center">
        <img src="..">
    </div>
</div>

Если вы хотите, чтобы изображение находилось только по центру (а не по содержимому другого столбца), создайте изображение display:block с помощью класса d-block, и тогда mx-auto будет работать.

<div class="row">
  <div class="col-4">
    <img class="mx-auto d-block" src="..">
  </div>
</div>

Demo: http://www.codeply.com/go/iakGGLdB8s

Ответ 3

Три способа выровнять img по центру родительского элемента.

  1. img является встроенным элементом, text-center выравнивает встроенные элементы в центре его контейнера, если контейнер является элементом block.

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'; return false;" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col text-center">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
    </div>
  </div>
</div>