Question

截至目前，我可以水平居中图像，但是一旦我尝试垂直居中（添加顶边距），父div也会向下移动（这是我不想要的）。

以下是我所说的图片：Screenshot

我认为最好的选择是将其设置为绝对位置，但之后我会遇到水平居中问题。

<div id="header">
    <div id="container">
        <div id="logo">
            <a href="index.html"><img src="images/logo.png" /></a>
        </div>
    </div>
</div>

#container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

#logo {
    height: 96px;
    width: 484px;
    margin: 50px auto;
}

非常感谢帮助！谢谢

Answer 1

您可以将overflow: hidden放在#container上。它将引入一个新的块格式化上下文，因此边距不会再折叠。

Answer 2

从我看到的，容器不会降低（也不应该），只是徽标（由于边距）它会降低。

您想在图片中居中，在标题上？为标题指定一个固定的高度，并使用边距或填充来使图像居中。如果标题的高度需要流畅，那么你可以使用

#container {
    width: 960px;
    margin: 0 auto;
    position: relative;
    vertical-align: middle; 
    display: table-cell
}

希望有所帮助！

[R

水平居中绝对定位分区

2 个答案: