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

Вывод:

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

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

В этом случае не предполагайте размер изображения (например, 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}