Я использую фреймворк 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>
Какой самый простой способ получить изображение по отношению к странице?
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.center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Вы можете увидеть образец из здесь
Правильный способ сделать это:
<div class="row text-center">
<img ...>
</div>
Добавьте "center-block" к изображению как к классу - никаких дополнительных css не требуется
<img src="images/default.jpg" class="center-block img-responsive"/>
Обновление 2018
Класс center-block больше не существует в Bootstrap 4. Чтобы центрировать изображение в Bootstrap 4, используйте mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
У бутстрапа Twitter есть класс, который центрирует:.pagination-centered
Это сработало для меня:
<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;
}
Изменить
Как уже упоминалось в других ответах, вы можете добавить класс bootstrap 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>
Мне нужно то же самое, и здесь я нашел решение:
fooobar.com/questions/14959/...
<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 с классом bootstrap 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.