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

vertical-align不会那样工作。您可以将图像作为背景图像应用于父div或锚点，并使用background-position：center center。

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

Answer 2

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

您将不再需要vertical-align：middle;或显示：块;在img样式上你也可以删除顶部/底部填充。

Answer 3

将图像集中在一个框中的良好记录：

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

图像不是中间对齐

3 个答案: