CSS: Почему "vertical-align: middle" не работает?
Рассмотрим следующий пример: (живая демонстрация здесь)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
Вывод:
![enter image description here]()
Почему изображение не вертикально центрировано?
Как я могу исправить это, чтобы он работал во всех основных браузерах?
В этом случае не предполагайте размер изображения (например, 32x32), поскольку в реальном случае размер изображения неизвестен.
Ответы
Ответ 1
Вы можете использовать position:absolute;
для этого.
Например:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
ПРИМЕЧАНИЕ. Это дает margin-top
половину размера изображения.
Отметьте http://jsfiddle.net/cXUnT/7/
Ответ 2
У вас должно быть display: table-cell
, я думаю, это работает только в таблицах. Я использую line-height
, равный высоте элемента, и он тоже работает.
Ответ 3
Я не могу сказать вам о том, почему это происходит (мне любопытно). Но это работает для меня:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}
Ответ 4
У меня была та же проблема. Это работает для меня:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
Ответ 5
Если вы знаете вертикальный размер элемента и высоту строки, вы можете вертикально центрировать его, используя vertical-align: top
плюс верхний край.
Для иллюстрации я создал: http://jsfiddle.net/feklee/cXUnT/30/
Ответ 6
Просто поместите тег img внутри тега div в набор display: table-cell vertical-align: middle to the div. Родительский тег должен отображаться: table
Пример:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>
Ответ 7
Не уверен, в чем причина.
Удаление line-height
и добавление margins
к изображению делает трюк.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>
Ответ 8
Попробуйте использовать фоновое изображение на <a>
:
<a href="#"></a>
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}