图像不是居中对齐

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

垂直对齐不是这样工作的。您可以将图像作为背景图像应用于父div或锚点，并使用background-position: center center。

如果你希望锚的内联内容垂直居中，一种方法是将元素的行高设置为所需的总高度。

Answer 2

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

您将不再需要在img样式上垂直对齐: longer；或display:block；，并且您可能还可以删除顶部/底部填充。

Answer 3

关于将图像居中放置在框中的好文章：

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