Я делаю каталог с использованием Bootstrap 3. При отображении на планшетах изображения продукта выглядят уродливыми из-за их небольшого размера (500x500) и ширины 767 пикселей в браузере. Я хочу поместить изображение в центр экрана, но по какой-то причине я не могу. Кто поможет решить проблему?
Если вы используете Bootstrap v3.0.1 или выше, вы должны использовать это решение. Он не переопределяет стили Bootstrap с пользовательским CSS, но вместо этого использует функцию Bootstrap.
Мой оригинальный ответ показан ниже для потомков
Это приятное решение. Поскольку .img-responsive из Bootstrap уже устанавливает display: block, вы можете использовать margin: 0 auto для центрирования изображения:
.product .img-responsive {
margin: 0 auto;
}
Существует .center-block класс в Twitter Bootstrap 3 (Начиная с версии 3.0.1), поэтому используйте:
<img src="..." alt="..." class="img-responsive center-block" />
Добавьте к изображению только center-block класса, это также работает с Bootstrap 4:
<img src="..." alt="..." class="center-block" />
Примечание: center-block работает даже при использовании img-responsive
Просто используйте класс .text-center, если вы используете Bootstrap 3.
<div class="text-center">
<img src="..." alt="..."/>
</div>
Примечание. Это не работает с img-отзывчивым
Это должно сосредоточить изображение и сделать его отзывчивым.
<img src="..." class="img-responsive" style="margin:0 auto;"/>
Я бы предложил более "абстрактную" классификацию. Добавьте новый класс "img-center", который можно использовать в сочетании с классом .img-responsive:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
Вы все еще можете работать с img-responsive, не воздействуя на другие изображения этим классом стиля.
Вы можете предшествовать этому тегу с идентификатором/классом id/div раздела, чтобы определить порядок, в котором этот img является вложенным. Этот пользовательский img-responsive будет работать только в этой области.
Предположим, что у вас есть область HTML, определенная как:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>
Тогда ваш CSS может быть:
section#work .img-responsive{
margin: 0 auto;
}
Примечание. Этот ответ относится к потенциальному влиянию изменения img-responsive в целом. Конечно, center-block - простейшее решение.
Попробуйте следующее:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}
Чтобы добавить к уже указанным ответам, наличие img-responsive в сочетании с img-thumbnail будет устанавливать display: block в display: inline block.
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
Попробуйте этот код, он будет работать и для маленьких значков тоже с bootstrap 4, потому что нет класса центра-блока bootstrap 4, поэтому попробуйте этот метод, это будет полезно. Вы можете изменить положение изображения, установив .col-md-12 в .col-md-8 или .col-md-4, это вам.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>
Вы можете исправить это с помощью определяющего поля: 0 auto
или вы можете использовать col-md-offset также
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>Более точный способ, применяемый ко всем объектам Booostrap с использованием стандартных классов, - это не устанавливать верхние и нижние поля (поскольку изображение может наследовать их от родителя), поэтому я всегда использую:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}
Я также создал Gist для этого, поэтому, если какие-либо изменения будут применены из-за каких-либо ошибок, версия обновления будет всегда здесь: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
Пока что лучшим решением для принятия является <img class="center-block".../>. Но никто не упомянул, как работает center-block.
Возьмите Bootstrap v3.3.6, например:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
Значение параметра dispaly для <img> умолчанию является inline. block значений будет отображать элемент как элемент блока (например, <p>). Он начинается с новой строки и занимает всю ширину. Таким образом, две настройки поля позволяют изображению оставаться в середине по горизонтали.
Просто поместите все миниатюры изображений внутри разделов строки/столбца следующим образом:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
и все будет хорошо!