на его родителя.

всех сил пытаюсь центрировать изображение, используя только 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>

Ответы на вопрос(3)

Решение Вопроса

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

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

Или оставьте это как inline-block и оберните это в div с.text-center:

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

я сделалиграть на скрипке показывая оба пути. Они документированыВот также.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" 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>

mx-auto центрыblock элементы. Чтобы так изменитьdisplay изображения изinline вblock сd-block учебный класс.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">,;
  <div class="row">
    <div class="col">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid d-block mx-auto">
    </div>
  </div>
</div>

использованиеd-flex а такжеjustify-content-center на его родителя.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
  <div class="row">
    <div class="col d-flex justify-content-center">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
    </div>
  </div>
</div>

Так как 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>

Демо-версия:http://www.codeply.com/go/iakGGLdB8s

Ваш ответ на вопрос