Адаптивный центр выравнивания изображений bootstrap 3

Я делаю каталог с помощью Bootstrap 3. При отображении на планшетах изображения продукта выглядят некрасиво из-за их небольшого размера (500x500) и ширины 767 пикселей в браузере. Я хочу поместить изображение в центр экрана, но почему-то не могу. Кто будет помогать решать проблему?



enter image description here

778   15  

15 ответов:

если вы используете Bootstrap v3.0. 1 или выше, вы должны использовать данное решение вместо. Он не переопределяет стили Bootstrap с помощью пользовательского CSS, но вместо этого использует функцию Bootstrap.

мой оригинальный ответ показан ниже для потомков

это приятно легко исправить. Потому что .img-responsive из Bootstrap уже устанавливает display: block, вы можете использовать margin: 0 auto в центр изображения:

.product .img-responsive {
    margin: 0 auto;
}
529  
2017-05-23 15:26:38

здесь .center-block класс в Twitter Bootstrap 3 (С V3.0.1), чтобы использовать:

<img src="..." alt="..." class="img-responsive center-block" />
1105  
2014-03-09 15:07:54

добавить только класс center-block к образу, это работает с Bootstrap 4, а также:

<img src="..." alt="..." class="center-block" />

Примечание: center-block работает даже тогда, когда img-responsive используется

92  
2018-08-23 10:56:55

просто использовать .text-center класс, если вы используете Bootstrap 3.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

Примечание: это не работает с img-responsive

31  
2015-05-02 17:57:46

Это должно выровнять изображение и сделать его отзывчивым.

<img src="..." class="img-responsive" style="margin:0 auto;"/>
9  
2018-06-05 18:22:03

Я бы предложил более "абстрактной" классификации. Добавьте новый класс "img-center", который можно использовать в сочетании С.класс в img-отзывчивый:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
6  
2013-11-27 17:01:53

вы все еще можете работать с 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 как a целый. Конечно,center-block самое простое решение.

3  
2015-11-05 17:34:44

попробуйте это:

.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>
3  
2017-08-02 13:10:42 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
2  
2013-08-27 13:29:11

чтобы добавить к уже данным ответам, имея img-responsive в сочетании с img-thumbnail устанавливается display: block до display: inline block.

2  
2013-11-08 14:22:49 
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
2  
2015-02-19 19:21:56

попробуйте этот код он будет работать для небольших значков тоже с bootstrap 4, потому что нет центрального блока класса bootstrap 4 так что попробуйте этот метод будет полезно. Вы можете изменить положение изображения, установив .col-md-12 to .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>
1  
2016-11-23 18:41:44

вы можете исправить это с определением поля: 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>
0  
2016-07-14 15:34:19

более точный способ, применяемый ко всем объектам Booostrap, использующим только стандартные классы, - это не устанавливать верхние и Нижние поля (поскольку изображение может наследовать их от родителя), поэтому я всегда использую:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

Я также сделал суть для этого, так что если какие-либо изменения будут применяться из-за каких-либо ошибок, версия обновления будет всегда здесь: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

0  
2017-01-04 11:02:18

до сих пор лучшим решением для принятия кажется <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>). Он начинается на новой линии и занимает всю ширину. Таким образом, две настройки полей позволяют изображению оставаться в середине горизонтально.

0  
2018-07-30 23:43:03

Comments

    Ничего не найдено.
Click here to cancel reply.