Как выровнять изображение по центру с помощью bootstrap

Я использую фреймворк bootstrap и безуспешно пытаюсь получить изображение, центрированное по горизонтали...

Я пробовал различные методы, такие как разделение 12-сеточной системы на 3 равных блока, например.

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Какой самый простой способ получить изображение, центрированное относительно страницы?

GEOCHET
Редактировал вопрос 5-го мая 2014 в 10:11
Программирование
css twitter-bootstrap
4-го июня 2012 в 10:40
24 просмотров
Комментарии к вопросу (3)

Twitter начальной загрузки В3.0.3 класс: центр-блок

центр содержания блоков

набор элементов для отображения: блок и через центр поля. Доступен миксины и класс.

Просто нужно добавить класс "в центре-блок" в тег img, выглядит так

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
  </div>
</div>

В Bootstrap уже есть стиль CSS звонок .центр-блок

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Вы можете увидеть пример из [здесь][1]

aarona
Редактировал ответ 12-го мая 2019 в 7:54
Комментарии (1)

Правильный способ сделать это

<div class="row text-center">

</div>
Комментарии (4)

Добавить 'центр-блок' имидж как класс - без дополнительных УСБ

Комментарии (4)

Обновление 2018

Центр-блок класса больше не существует в прихлоп 4. В центре изображения в Bootstrap 4, использовать МХ-автоматический D-блок`...

Zim
Редактировал ответ 25-го апреля 2018 в 10:32
Комментарии (2)

В Twitter bootstrap есть класс, который центрирует: .pagination-centered

Для меня это сработало:

<div class="row-fluid">
   <div class="span12 pagination-centered">![header](header.png)</div>
</div>

css для класса таков:

.pagination-centered {
  text-align: center;
}
Комментарии (2)

Можно использовать следующий. Он поддерживает Bootstrap 3.х выше.

![...](...)
Adrian
Редактировал ответ 1-го сентября 2017 в 4:08
Комментарии (1)

Если рядом с изображением больше ничего нет, лучшим способом будет использование text-align: center в родительском img:

.row .span4 {
    text-align: center;
}

Редактировать

Как упоминалось в других ответах, вы можете добавить CSS-класс bootstrap .text-center к родительскому элементу. Это делает то же самое и доступно как в v2.3.3, так и в v3.

Комментарии (4)

Работает для меня. попробуйте использовать центр-блок

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"></div>
      <div class="span4"></div>
    </div>
</div>
Leroy Gumede
Редактировал ответ 15-го апреля 2015 в 12:11
Комментарии (0)

Мне нужен такой же и вот я нашел решение:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

и в CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
Community
Редактировал ответ 23-го мая 2017 в 11:47
Комментарии (2)

Вы можете использовать свойство margin с загрузчиком класса ИМГ.

.name-of-class .img-responsive { margin: 0 auto; }
Комментарии (0)

Кажется, мы могли использовать новые функции HTML5, если версия браузера не проблема:

в HTML-файлах :

<div class="centerBloc">
  I will be in the center
</div>

И в CSS-файле, мы пишем:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

И так дел может быть совершенно центр в браузер.

dtechplus
Редактировал ответ 21-го сентября 2019 в 4:54
Комментарии (2)

Я создал и добавил на сайт.УСБ.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}
Комментарии (0)

Вы должны использовать 

<div class="row fluid-img">

</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}
Комментарии (0)

Я использую оправдать-содержание-центр класса в ряд в контейнере. Хорошо работает с Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">

  </div>
</div>
Комментарии (0)

Вы можете изменить CSS предыдущего решения следующим образом:

.container, .row { text-align: center; }

Это позволит отцентрировать все элементы в родительском div также.

Комментарии (0)