Центрировать изображение по горизонтали в пределах div

388

Вероятно, это глупый вопрос, но поскольку обычные способы выравнивания изображения по центру не работают, я подумал, что задам этот вопрос. Как я могу выровнять по центру (по горизонтали) изображение внутри его контейнера div?

Вот HTML и CSS. Я также включил CSS для других элементов миниатюры. Он работает в порядке убывания, поэтому самый высокий элемент - это контейнер всего, а самый низкий - внутри всего.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}
<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Хорошо, я добавил разметку без PHP, поэтому ее будет легче увидеть. Похоже, что ни одно из решений не работает на практике. Текст сверху и снизу не может быть центрирован, а изображение должно быть центрировано внутри его контейнера div. В контейнере скрыто переполнение, поэтому я хочу видеть центр изображения, как правило, там, где находится фокус.

Джейкоб Виндзор
источник
1
Предполагается, что изображение отображается в той же строке, что и первая ссылка (Artisturl)?
Shoaib
5
imgявляются предметом, text-align: centerесли они displayне были изменены.
Джаред Фарриш
5
jsfiddle.net/cEgRp - простоtext-align: center
Золтан Тот
3
Джейкоб, ты можешь хотя бы опубликовать фактическую разметку, которую видит браузер, а не шаблон, наполненный PHP? Также всегда помогает работающий jsfiddle.net .
Джаред Фарриш
2
Не берите в голову мой комментарий - я не заметил, что imgбыло включено в a. Я тупой.
Shoaib

Ответы:

838

Парень CSS предлагает следующее:

Итак, перевод, возможно:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Вот мое решение в: http://jsfiddle.net/marvo/3k3CC/2/

Marvo
источник
10
Я не думаю, что это хорошая идея, а также я полагаю, что некоторые предостережения, вроде как margin: auto, зависят от содержащего элемента, имеющего назначенное значение ширины.
Джаред Фарриш
4
Я все еще совершенствую свои навыки CSS, так что спасибо за интересный вопрос для изучения. Но в этом случае он использует фиксированную ширину контейнера.
Марво
1
Что именно обозначает обозначенная ширина в этом контексте? Определенно кажется полезным иметь полезные знания.
Shoaib
1
Посмотри на эту скрипку, которую я сделал ; Я не уверен, что думать. То, что вы предлагаете, ничего не сделает, и imgя считаю, что в любом случае потребуется ширина, определенная для какого-либо эффекта auto.
Джаред Фарриш
2
Вы на самом деле не реализовали решение, которое я представил. Во-вторых, вмещающий div имеет ширину 120px, что примерно равно ширине изображения, что затрудняет просмотр фактического центрирования изображения. Вот мое решение: jsfiddle.net/marvo/3k3CC/2
Marvo
88

CSS flexbox может сделать это с justify-content: centerродительским элементом изображения. Чтобы сохранить пропорции изображения, добавьте align-self: flex-start;к нему.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Вывод:

Манодж Кумар
источник
4
Отличное решение, когда браузер поддерживает это, что делает мой. Можно также использовать align-itemsдля центрирования по вертикали. Различные варианты полей не работают для меня, потому что центрируемый элемент не имеет атрибутов width и height.
Марк
1
В моем случае, div имеет заданный размер (например, 50 пикселей), и это растянет изображение до 50 пикселей.
Макс
1
@Max В этом случае вы можете применить align-selfк элементу изображения, как этот jsfiddle.net/3fgvkurd
Манодж Кумар
69

Я только что нашел это решение ниже на странице CSS W3, и оно ответило на мою проблему.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Источник: http://www.w3.org/Style/Examples/007/center.en.html.

mk.hd
источник
Я использую max-width: 100%; max-height: 100%;для изменения размера изображения, если экран меньше, чем изображение, но в этом случае он не по центру. Любые предложения о том, как центрироваться с этими двумя атрибутами
Алексей Страх
18

Это также сделало бы это

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}
Мехмет Яден
источник
Вы имели в виду text-align:center;и margin:0 5px;? Я добавил;
Jagb
Точки с запятой @jagb не требуются для последнего свойства в блоке селектора.
TylerH
4
@TylerH Это правда, точки с запятой не требуются для последнего свойства в блоке селектора, но всегда безопаснее использовать точки с запятой. Что если я напишу файл CSS, другой разработчик отредактирует мой файл позже, они добавят некоторый код (после строки с отсутствующей точкой с запятой строка, которую я написал ранее в этом CSS-файле) и их высота, ширина или другое объявление не работают (или, что еще хуже, они не замечают, что это не работает). Я бы сказал, что безопаснее оставлять точки с запятой. Вот почему я использую точки с запятой и никогда не пропускаю точки с запятой.
jagb
@jagb Если другой разработчик отредактирует ваш файл позже, они добавят точки с запятой, где это необходимо, или это будет проблемой для написания кода с ошибками. Ответ на ваш первоначальный комментарий по-прежнему: «Точки с запятой в последней строке в CSS - это выбор стиля».
TylerH
Я согласен с Jagb. Этот сайт должен продвигать хороший выбор стиля. Хороший стиль не оставляет код, который легко нарушается. Ввод точки с запятой в каждой строке может стоить 1/10 секунды, а отладка для поиска единственной пропущенной точки с запятой может стоить вам часов. Вот почему на этом настаивают крупные технологические компании: Руководство по стилю Google HTML / CSS - Декларация
прекращается
14

Лучшее, что я нашел (кажется, работает во всех браузерах) для центрирования изображения или любого элемента по горизонтали, - это создание класса CSS и включение следующих параметров:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Затем вы можете применить созданный вами класс CSS к вашему тегу следующим образом:

HTML

<img class="center" src="image.jpg" />

Вы также можете встроить CSS в свои элементы, выполнив следующие действия:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

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

Kevin
источник
сделал работу, но для совместимости браузера, вам нужно будет использовать другие формы преобразования.
Джей Смоук
11

Это то, что я в итоге сделал:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

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

Cherno
источник
8

Я собираюсь выйти на конечности и сказать, что то, что вы ищете.

Обратите внимание, что следующее, на мой взгляд, было случайно опущено в вопросе (см. Комментарий):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Итак, что вам нужно, это:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Джаред Фарриш
источник
Хм ... Держу пари, это работает. Я сконцентрировал ИЗОБРАЖЕНИЕ в своем решении, но я вижу, как вопрос можно интерпретировать как центрирование div-enclicing-the-image внутри другого div. В любом случае, одно и то же решение.
Марво
Ни одно из решений не работает на практике. Я попробовал оба решения, прежде чем они просто не будут работать. Пожалуйста, обратитесь к редактированию в вопросе
Джейкоб Виндзор
3

Для центрирования изображения по горизонтали это работает:

<p style="text-align:center"><img src=""></p>
калария парикшит
источник
Да, но если вы планируете отображать изображение в виде блока, чтобы избежать скучного белого пространства под ним, это больше не сработает ...
Д-р Фред
3

Добавьте это к вашему CSS:

#artiststhumbnail a img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Просто ссылаясь на дочерний элемент, который в этом случае является изображением.

loxsat
источник
2
это хорошо, когда вы все еще хотите получить доступ к верхнему
полю
2

Поместите равные пиксельные отступы для левого и правого:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
V-SHY
источник
1

Поместите картинку внутрь newDiv. Сделайте ширину содержимого divтакой же, как изображение. Применить margin: 0 auto;к newDiv. Это должно центрировать divвнутри контейнера.

сету
источник
1

Используйте позиционирование. Следующее работало для меня ... (горизонтально и вертикально по центру)

С увеличением до центра изображения (изображение заполняет div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Без увеличения до центра изображения (изображение не заполняет div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
ThomasAFink
источник
1

вы можете выровнять ваш контент, используя flex box с минимальным кодом

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

Сантош Халсе
источник
1

Сосредоточить изображение в div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

antelove
источник
1

Я попробовал несколько способов. Но этот способ прекрасно работает для меня

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
Ифват Ибрагим
источник
1

Адаптивный способ центрировать изображение может быть таким:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
Али Сафари
источник
0

Если вам нужно сделать , это инлайн (например, при использовании поля ввода),
вот быстрый Хак , который работал для меня: окружить (ссылку на изображение в данном случае)
в divсstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */
SherylHohman
источник
0
##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
Шива Калияморти
источник
5
Добро пожаловать в stackoverflow! Пожалуйста, добавьте некоторые объяснения к вашему ответу.
Максимилиан Питерс
Если мы хотим зафиксировать определенный <div> или <section>вертикальный и горизонтальный центр страницы для всех устройств, просто используйте этот код стиля !!!!
Шива Калияморти
Похоже, этот ответ относится к другому вопросу :)
Manoj Kumar
0

да, код вроде этого работает нормально

<div>
 <img>
</div>

но просто чтобы напомнить вам, стиль для изображения

object-fit : *depend on u*

итоговый код будет похож на пример

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Конечный результат

Марк Воробей
источник
0

Использование свойства flex в контейнере является правильным решением для возможности центрирования как по вертикали, так и по горизонтали.

Верхний ответ здесь НЕ работает для центрирования элемента по вертикали, только по горизонтали.

Synaikido
источник
ОП четко просил горизонтальное выравнивание.
Элвин Мойо
-1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>
КЕС НОРКУС
источник