Я борюсь, чтобы центр изображения, используя только загрузочный's для CSS-классы. Я уже пробовал несколько вещей. Прибавлялось начальной загрузки CSS-класс МХ-авто
в ИМГ
элемент, но он ничего не делает.
Помощь приветствуется.
<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>
Изображения по умолчанию отображается как inline-блок, нужно отобразить его как блок для того, чтобы центр его .МХ-авто
. Это можно сделать с помощью встроенной.д-блок`:
<div class="container">
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="...">
</div>
</div>
</div>
Или оставить его как inline-block и завернула его в DIV с .текст-центр
:
<div class="container">
<div class="row">
<div class="col-4">
<div class="text-center">
<img src="...">
</div>
</div>
</div>
</div>
Я сделал [скрипка][1] показаны обе стороны. Они документируются здесь, а также.
После img это встроенный элемент, просто использовать текст-центр
На она'контейнер С. Используя МХ-авто
будет контейнер (колонка) тоже.
<div class="row">
<div class="col-4 mx-auto text-center">
<img src="..">
</div>
</div>
Если вы хотите только центр изображения (а не другого содержания), сделать отображение изображения:блокс помощью блока " Д " класса, а затем
МХ-авто` будет работать.
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="..">
</div>
</div>
ИМГ
в центре своего родителя.ИМГ
- это встроенный элемент, текст-центр` выравнивает встроенные элементы в центре контейнера контейнер должен быть "блок" элемент. в
<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>
в
МХ-авто
центров заблокировать
элементов. Для того, чтобы изменить "дисплей" ИМГ от инлайн
в блок
с д-блок
класса. в
<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>
в
д-флекс " и " оправдать-содержание-центр
на своего родителя. в
<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>
в