Вертикальное выравнивание внутри div, вертикальное выравнивание: середина не работает - PullRequest
Новая
       6

Вертикальное выравнивание внутри div, вертикальное выравнивание: середина не работает

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

по вертикали: среднее; не работает. 

From css file :
#header {height:150px; text-align: center; vertical-align: middle;}

<div id="header">
    <img alt="" id="logo" src="images/logo.png" />
</div>

Я бы обернул логотип внутри другого элемента div, если он поможет выровнять его по центру элемента div.

Ответы [ 6 ]

18 голосов
/ 03 декабря 2011

сделать это 

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

Ссылка

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

Вы можете сделать это только с помощью отступов, потому что два других способа высота строки и выравнивание по вертикали не могут работать на img ....

Запись 

#logo
{
padding: 20px 0;
}

20px может быть любым, как вам нужно.

0 голосов
/ 10 июля 2013

Я не знаю, почему это работает в моем случае ... но я мог видеть, как это работает, выполнив следующее: 

div {padding-top: 0%;}
0 голосов
/ 03 декабря 2011 
#logo {
    position: absolute;
    top: 50%;
    margin-top: -75px;
}

Общий метод выполнения вертикального выравнивания. При этом top равен 50%, а margin-top - отрицательная половина размера родительского div.

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

Еще один вариант, хотя он имеет свои ограничения: 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div style="height:150px; text-align: center;">
      <img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" />
   </div>
</body>
</html>

Отрицательное поле должно составлять половину высоты изображения. Таким образом, следующее изображение будет находиться в центре HTML-кода:

enter image description here

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

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

Мне нравится это делать: 

<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
...