изображение не по центру

Question

Мое изображение остается на вершине. Использование кода:

#header_div{
min-height:200px;
}

#header_div img{
display:block;
vertical-align:middle;
padding:5px 10px;
}

<div id="header_div">
    <a href="#">
        <img width="250" height="75" src="./images/header_logo.png" />
    </a>
</div>

Следует отметить, что я должен закрыть теги изображений с помощью />?

Answer 1

#header_div
{ 
min-height:200px; 
display: table-cell;
vertical-align:middle;
} 

Вам больше не понадобится выравнивание по вертикали: середина;или дисплей: блок;в стиле img, и вы, вероятно, также можете удалить верхний / нижний отступы.

Answer 2

хорошая запись о центрировании изображения в коробке:

http://www.brunildo.org/test/img_center.html

Answer 3

вертикальное выравнивание не работает так.Вы можете применить изображение как фоновое изображение к родительскому элементу div или к якору и использовать background-position: center center.

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