Я делаю каталог, используя Bootstrap 3. При отображении на планшетах изображения товара выглядят некрасиво из-за их небольшого размера (500х500) и ширины 767 пикселей в браузере. Я хочу поместить изображение в центр экрана, но почему-то не могу. Кто поможет решить проблему?
Ответы:
Если вы используете Bootstrap v3.0.1 или выше, вам следует использовать это решение . Он не переопределяет стили Bootstrap с помощью пользовательского CSS, но вместо этого использует функцию Bootstrap.
Мой оригинальный ответ показан ниже для потомков
Это приятно легко исправить. Поскольку .img-responsiveиз Bootstrap уже установлены display: block, вы можете использовать margin: 0 autoдля центрирования изображения:
.product .img-responsive {
margin: 0 auto;
}
margin: 0 auto, чем изменять .img-отзывчивый.
В .center-blockTwitter Bootstrap 3 есть класс ( начиная с версии 3.0.1 ), поэтому используйте:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"у меня class="img-responsive center-block"не работает (bootstrap 3, но версия несколько месяцев назад)
<a href="#"> </a>пары, кликабельная область будет расширена до полной ширины вмещающего контейнера, которая может быть немного больше, чем ваше изображение. Это может запутать пользователей, которые нажимают на то, что они считают «пустым» пространством.
Добавьте только класс 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-responsive
Вы все еще можете работать img-responsiveбез влияния на другие изображения с этим классом стиля.
Вы можете добавить к этому тегу раздел id / div id / class, чтобы определить порядок, в котором 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это самое простое решение.
Попробуйте этот код, он будет работать и для маленьких значков с начальной загрузкой 4, потому что нет центра класса блока, который является начальной загрузкой 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>
Попробуй это:
.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>Просто поместите все миниатюры изображений внутри строк / столбцов:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>и все будет работать нормально!
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>,
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>Вы можете исправить это с помощью определения поля: 0 авто
или вы также можете использовать 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>). Он начинается с новой строки и занимает всю ширину. Таким образом, две настройки полей позволяют изображению оставаться посередине по горизонтали.
:)