1

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

这是我正在谈论的图像：屏幕截图

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

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

帮助将不胜感激！谢谢

4

2 回答 2

0

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

于 2012-08-09T23:48:52.077 回答
0

据我所见，容器并没有降低（也不应该），只是徽标（由于边距）降低了。

你想在哪里将图像居中，在标题上？给标题一个固定的高度，并使用边距或填充使图像居中。如果标题的高度需要流动，那么您可以使用

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

希望有帮助！

R

于 2012-08-09T23:58:17.483 回答