вертикальный центр изображения, не зная размеров - PullRequest
Новая
       22

вертикальный центр изображения, не зная размеров

5 голосов
/ 29 декабря 2011

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

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png" />
    </div>
</div>

Ответы [ 6 ]

9 голосов
/ 29 декабря 2011

Вы можете использовать этот CSS для своего родителя: 

#parent {
    display:table-cell;
    vertical-align:middle;
}

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

Пример .

4 голосов
/ 29 декабря 2011

Если ваш дизайн не позволяет вам сделать parent встроенным (если это так, используйте решение Пурму, это лучше), вы можете установить line-height на parent равным height и vertical-align: middle; на вашем img.

Демо: http://jsfiddle.net/ThinkingStiff/YRGBk/

HTML: 

<div id="wrapper">
    <div id="parent">
        <img src="http://placehold.it/200x200" />
    </div>
</div>

CSS: 

img {
    vertical-align: middle;
}

#parent {
    height:400px;
    border:1px solid black;
    line-height: 400px;
}

Выход:

enter image description here

1 голос
/ 29 декабря 2011 
#parent img{vertical-align:middle;}
0 голосов
/ 02 июня 2014

Я нашел это при поиске решения аналогичной проблемы, решение использует CSS3, поэтому не будет работать на IE8 и ниже.

Хотя это старый вопрос, я подумал, что обновленный ответ может быть кому-то полезен: 

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png">
    </div>
</div>

#parent{
    width:400px;
    height:400px;
    background:red; /* just used to highlight box */
    text-align:center;
}    
#parent img{
    position:relative;   
    top: 50%;
    transform: translateY(-50%);
}

См. Эту скрипку: http://jsfiddle.net/E9sTk/

0 голосов
/ 29 декабря 2011

Есть хитрость, чтобы сделать это, даже без Javascript. Нам нужно знать высоту родительского элемента, а также еще один тег.

Сначала добавьте тег SPAN до или после тега IMG: 

<div id="wrapper">
   <div id="parent">
      <span>&nbsp;</span><img src="path/i/got/from/database/image.png" />
   </div>
</div>

При этом следующая декларация CSS выравнивает изображение по желанию: 

#parent {
   height: 500px;      /* This height is important for the following lines */

   line-height: 500px; /* Text-content needs to get full height for the
                          'vertical-align'-attribute to work */
}
#parent span {
   display: inline-block; /* Should work even for IE6/7 in this case */

   height: 500px;         /* Needed for IE */

   width: 10px;
   margin-right: -10px;   /* Any element to the right is pushed to the left
                             offset of the SPAN-tag */ 
}
#parent img {
   vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}

Это должно работать даже для IE6 и 7.

Редактировать:

  • Решение ThinkingStiffs проще и, следовательно, лучше. Я просто не работаю в IE6.

  • Чистое решение не работает для IE6 и 7, см. Объявление на дисплее

0 голосов
/ 29 декабря 2011

Вы можете использовать это: 

#wrapper{    
height: 100%;
min-height: 500px;/*Assuming min-height of the container*/
position: relative;
width: 100%;}

#parent{    
border: 1px solid;
height: 50px;
position: absolute;
top: 50%;
width: 50px;}

Проверьте это и в скрипке http://jsfiddle.net/kYgqx/2/

...