Вопрос по css, twitter-bootstrap – Как выровнять мертвую точку изображения с помощью начальной загрузки

190

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

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

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

If you have img-responsive class on your img tag, the image may not center.  Увидетьthis SO answer для объяснения того, почему с помощью начальной загрузкиcenter-block класс решит эту проблему путем начальной загрузки. gibberish
Кто-то пометил это как не ответ, и я согласен. Пожалуйста, добавьте это как комментарий, и ваш ответ будет удален в ближайшее время. Doorknob
И кстати. Возможно, вы захотите взглянуть на раздел & quot; Смещенные столбцы & quot ;.twitter.github.com/bootstrap/scaffolding.html#gridSystem mind85

Ваш Ответ

15   ответов
17

Работает для меня. попробуйте использовать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>
0

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

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

<img src="..." alt="..." class="img-responsive center-block" />
Спасибо за это. Как раз то, что мне было нужно сегодня.
52

.pagination-центрирован

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

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

CSS для класса:

.pagination-centered {
  text-align: center;
}
.text-center не работает в моем случае.
Или, может быть.text-center учебный класс?
28

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

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

Edit

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

потратил больше 2 или 3 часа и только эту строчку ... спасибо!
@Fixer The<ul> все равно следует выровнять центр:jsfiddle.net/N74N7/1 Там должен быть другой код CSS, влияющий на него
Начиная с .row в одном из основных классов в твиттере начальной загрузки. Я бы порекомендовал определить новый класс, как на этой страницеtwitter.github.com/bootstrap/index.html с топ-класса класса.
Идеальный - это делает работу. Но скажи, что у меня есть & lt; ul & gt; элемент под изображением ... Это не выравнивает центр, как ожидалось, я могу что-нибудь добавить? Спасибо Fixer
1

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

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

в файлах HTML:

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

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

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

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

Ваш класс div называется .centerBloc, а ваш файл css показывает body.loadingDiv ...
6

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;
}
Я думаю, что люди начальной загрузки должны добавить это к их CSS
Привет и спасибо! Я использую Bootstrap v3 сейчас. Я добавил это в мой div контейнера img, поэтому мне пришлось указать точную ширину (по крайней мере) для моего div, чтобы все работало. Если у вас нет контейнера или изображения разных размеров, добавьте этот класс к своему изображению.
133

<div class="row text-center">
  <img ...>
</div>
это не работает для меня при использовании этого на этом -startbootstrap.com/round-about .. но добавление классаcenter-block к<img> элементы работали ..
вместо этого вы должны использовать центральный блок, как сказано в документации:getbootstrap.com/css/#images-responsive
text-center не будет работать на изображениях с img-отзывчивым классом, но комментарий выше (о center-block) решает эту проблему
Замечание: в Bootstrap v3.1.0 можно центрировать img-отзывчивый в столбце, добавив text-center к столбцу. Это поведение нарушено в v3.3.4. Очень надоедливый. CSS отстой.
56

Update 2018

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

<img src="..." class="mx-auto d-block"/>
здесь, если вы ищете это в 2017 году
Просто чтобы добавить небольшое пояснение к «Обновлению 2018»: mx-auto устанавливает для левого и правого поля значение auto; D-блок устанавливает отображение: блок
-2

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

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

0

justify-content-center Класс для строки в контейнере. Хорошо работает с Bootstrap 4.

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

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

Просто нужно добавить класс & quot; центральный блок & quot; в теге 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>

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

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

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

закрытие</div> тег наcontainer div выглядит отсутствующим. это не работает для меня на v3.3.7
81

лнительных CSS не требуется

<img src="images/default.jpg" class="center-block img-responsive"/>
Один, чтобы запомнить ...
Добавление в IMG-отзывчивый это то, что работает для меня.
В начальной загрузке 4 используйтеmx-auto вместоcenter-block
Не уверен, почему -1 - ЭТО САМЫЙ ЛУЧШИЙ ОТВЕТ! Он использует встроенный вспомогательный класс в Bootstrap.

Похожие вопросы