Отзывчивый выравнивание изображений по центру bootstrap 3

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

Nick Chapman
Редактировал вопрос 12-го июля 2017 в 7:29
Программирование
image html css twitter-bootstrap alignment
27-го августа 2013 в 10:20
82 просмотров
Комментарии к вопросу (2)

Есть .центр-блок класс в Twitter начальной загрузки 3 (с V3.0.1), так что используйте:

![...](...)
Hashem Qolami
Редактировал ответ 9-го марта 2014 в 1:07
Комментарии (5)
Решение

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

Мой первоначальный ответ приведен ниже для наглядности.

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

.product .img-responsive {
    margin: 0 auto;
}
Community
Редактировал ответ 23-го мая 2017 в 12:26
Комментарии (3)

Добавить только центр-блок класс `для изображения, это работает с Bootstrap 4, а также:

![...](...)

Примечание: `центр- "заблокировать" работает, даже когда в img-отзывчивый используется

Harry Bosh
Редактировал ответ 23-го августа 2018 в 7:56
Комментарии (3)

Просто используйте .класс текст-центр, если вы'вновь с использованием Bootstrap 3.

<div class="text-center">
    ![...](...)
</div>

Примечание: это не'т работать с IMG-отзывчивый

Sai Kiran Sripada
Редактировал ответ 2-го мая 2015 в 2:57
Комментарии (4)

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

nPcomp
Редактировал ответ 5-го июня 2018 в 3:22
Комментарии (0)

Я бы предложил более "абстрактные" по классификации. Добавить новый класс "и ИМГ-центр" и которые могут быть использованы в сочетании с .класс в img-отзывчивый:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
Комментарии (0)

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

в 

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
      margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}
<div class="Image">
  ![Rafique](http://minisoft.com.bd/uploads/ourteam/rafiq.jpg)
</div>

в

Комментарии (0)

Попробуйте этот код, он будет работать на небольших иконок с Bootstrap 4, потому что нет центра-блока класса начальной 4 так что попробуйте этот способ, это будет полезно. Вы можете изменить положение изображения путем установки `.коль-МД-12 "до".коль-МД-8 "или".коль-МД-4, Это'ы до вас.

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">

           </div>
          </div>
       </div>
  </div>
Draken
Редактировал ответ 23-го ноября 2016 в 4:41
Комментарии (0)

Вы все еще можете работать с ИМГ-отзывчивая без влияния на другие изображения с этим непревзойденный стиль.

Вы можете предварить этот тег с разделом ИД/ див с id/class, чтобы определить порядок, в котором эта ИМГ вложен. Этот обычай компания IMG-отзывчивый будет работать только в этой области.

Предположим, у вас есть HTML-код области, определенной как:

<section id="work"> 
    <div class="container">
        <div class="row">

        </div>
    </div>
</section>

Тогда ваш CSS может быть:

section#work .img-responsive{
    margin: 0 auto;
}

Примечание: этот ответ является по отношению к потенциальному воздействию изменения `компания IMG-отзывчивый в целом. Конечно, центр-блок-это простейшее решение.

Комментарии (1)
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Комментарии (1)

Просто положить все изображения миниатюры в строку/столбец ДИВС такой:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

и все будет прекрасно работать!

Комментарии (0)

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

Комментарии (0)
 
<div class="col-md-12 text-center">

</div>

.


   .tocenter {
    margin:0 auto;
    display: inline;
    }
Комментарии (0)

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

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

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

Комментарии (0)

До сих пор самое лучшее решение принять, кажется, в <класс ИМГ="в центре-блок на" ... />. Но никто не упомянул как центр-штукатурные работы.

Возьмите начальной загрузки В3.3.6 например:

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

Значение по умолчанию дисплей для <ИМГ> это инлайн. Значение "блок" будет отображать элемент как блочный элемент (например, <п>). Он начинается с новой строки и занимает всю ширину. Таким образом, два значения полей пусть останусь изображения в центре по горизонтали.

Комментарии (0)

вы можете исправить это с определением маржи:0 авто

или вы можете использовать коль-МД-смещение также

в 




  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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>


.img-responsive{
margin:0 auto;
}



<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>                  
  ![Cinque Terre](http://www.w3schools.com/bootstrap/cinqueterre.jpg) 
</div>
</div>
</div>

в

Комментарии (0)