Как выровнять мертвую точку изображения с помощью начальной загрузки

Я использую среду начальной загрузки и пытаюсь получить изображение по центру по горизонтали без успеха ..

Я пробовал различные методы, такие как разбиение системы 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>

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

Twitter Bootstrap v3.0.3 имеет класс: центральный блок

Центрировать блоки контента

Установите отображаемый элемент: блок и центр с помощью поля. Доступный как mixin и класс.

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

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

В Bootstrap уже есть вызов в стиле css .center-block

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

Вы можете увидеть образец здесь

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

<div class="row text-center">
  <img ...>
</div>

Обновление 2018

Не center-blockкласс больше не существует в Bootstrap 4 . Чтобы центрировать изображение в Bootstrap 4, используйте mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Добавьте 'center-block' к изображению как класс - дополнительные CSS не требуются

<img src="images/default.jpg" class="center-block img-responsive"/>

У Twitter начальной загрузки есть класс, центр которого: .pagination-центрирован

Это сработало для меня, чтобы сделать:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

CSS для класса:

.pagination-centered {
  text-align: center;
}

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

<img src="..." alt="..." class="img-responsive center-block" />

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

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

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

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

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

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Мне нужно то же самое, и здесь я нашел решение:

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;
}

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

.name-of-class .img-responsive { margin: 0 auto; }

Кажется, мы могли бы использовать новую функцию 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%);
}

И поэтому div может быть идеально в центре браузера.

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

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</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;
        }
}

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

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

Я создал это и добавил в Site.css.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

Вы можете изменить CSS предыдущего решения, как показано ниже:

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

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