Як вирівняти мертвий центр зображення із завантажувальним рядком

Я використовую рамку завантажувального пристрою і намагаюся отримати зображення, зосереджене горизонтально, без успіху.

Я спробував різні методи, такі як розбиття системи 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 має клас: центр-блок

Центральні блоки вмісту

Встановіть для відображення елемент: блок та центр через поле. Доступний у вигляді міксину та класу.

Просто потрібно додати клас .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 call .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"/>

Додайте "центр-блок" до зображення як клас - додаткові 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;
}

Редагувати

Як було сказано в інших відповідях, ви можете додати початковий .text-centerелемент CSS-класу для завантаження. Це робить те саме, що доступно і в 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;
}

Ви можете використовувати властивість поля з класом img для завантаження.

.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.