CSS: почему «vertical-align: middle» не работает?

Question

Рассмотрим следующий пример: ( живое демо здесь )

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;
}

Вывод:

Почему изображение не отцентрировано вертикально?

Как я могу это исправить, чтобы он работал во всех основных браузерах?

Пожалуйста, не принимайте размер изображения (например, 32x32 в данном случае), потому что в реальном случае размер изображения неизвестен.

Answer 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/

Answer 2

У меня была такая же проблема.Это работает для меня:

 <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>

Answer 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 */
}

Answer 4

У вас должно быть display: table-cell Я думаю, это работает только в таблицах .. Я использую line-height, равный высоте элемента, и это тоже работает.

Answer 5

Не уверен в чем причина.

Удаление 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>

Answer 6

Просто поместите тег img в тег div, чтобы установить отображение: table-cell vertical-align: middle to div.Родительский тег должен отображаться: таблица

Пример:

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>

Answer 7

Если вы знаете вертикальный размер элемента и высоту строки, вы можете отцентрировать его по вертикали, используя vertical-align: top плюс верхнее поле.

Для иллюстрации я создал: http://jsfiddle.net/feklee/cXUnT/30/

Answer 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}