Адаптивный образ выравнивания по центру начальной загрузки 3

423

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

Снимок экрана: часть страницы товара с товаром, не центрированным под заголовком

html css image twitter-bootstrap alignment Константин Русанов
источник

5

Мне нравится дизайн вашего сайта и продуктов - хорошая работа:)

Bojangles

7

Другой пример «Почему нам нужно поместить код в тело вопроса».

ЛЕКАДА

572

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

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

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

.product .img-responsive {
    margin: 0 auto;
}

Bojangles
источник

35

Вероятно, лучше создать новый класс margin: 0 auto, чем изменять .img-отзывчивый.

вязать

4

Это мысль, хотя лично я ни о чем не могу думать, я бы хотел, чтобы адаптивное изображение не центрировалось, особенно с этим дизайном. Все зависит от варианта использования и того, что произойдет в будущем

Bojangles

Пожалуйста, посмотрите этот ответ, если вы используете Bootstrap v4 или

новее

1156

В .center-blockTwitter Bootstrap 3 есть класс ( начиная с версии 3.0.1 ), поэтому используйте:

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

DHlavaty
источник

27

Это должен быть принятый ответ, так как вам не нужно добавлять CSS для его использования.

user2602152

16

class="img-responsive" style="margin: 0 auto;"у меня class="img-responsive center-block"не работает (bootstrap 3, но версия несколько месяцев назад)

mxro

9

Выравнивание по центру не работает, когда используется img-отзывчивый.

Исмаэль

1

@DHlavaty Можете ли вы объяснить разницу между использованием .img-отзывчивого AND .center-block и простым использованием .img-отзывчивого с автоматическим запасом, как предполагает принятый ответ? один метод более надежен?

user137717

1

Возможно, вы не захотите использовать это, если ваше изображение должно быть кликабельным. То есть, если он обернут внутри <a href="#"> </a>пары, кликабельная область будет расширена до полной ширины вмещающего контейнера, которая может быть немного больше, чем ваше изображение. Это может запутать пользователей, которые нажимают на то, что они считают «пустым» пространством.

CXJ

108

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

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

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

Гарри Бош
источник

6

Лучший ответ, но недооцененный. Вот почему вы используете фреймворк!

Baumannzone

Так. Фантастический. Спасибо

AndrewLeonardi

Его работа .. Спасибо

Dhiren Patel

31

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

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

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

Сай Киран Срипада
источник

1

Речь идет оimg-responsive

Алексей Косов

Для img-отзывчивого добавьте img-center (протестировано на 3.3.6) для тех, кто может увидеть это в поиске в Google

DardanM

10

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

<img src="..." class="img-responsive" style="margin:0 auto;"/>

nPcomp
источник

6

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

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

Майкл
источник

3

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

Ahmed
источник

2

Почему display: table? Этого уже display: blockдостаточно, чтобы приступить margin: 0 autoк работе

Bojangles

3

Вы все еще можете работать 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это самое простое решение.

KannarKK
источник

Этот ответ недооценивается, упаковка изображения в классе строк имеет решающее значение для центрирования изображения, когда под изображением находится текст.

Гленн Плас

3

Попробуйте этот код, он будет работать и для маленьких значков с начальной загрузкой 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>

faseeh
источник

3

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

.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

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

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

и все будет работать нормально!

Энергетика
источник

2

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

М. Оранье
источник

2

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

,

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

user956584
источник

0

Вы можете исправить это с помощью определения поля: 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>

Развернуть фрагмент

Ганеш Путта
источник

0

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

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

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

LordMagik
источник

0

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

themefield
источник

Адаптивный образ выравнивания по центру начальной загрузки 3

Ответы: