Question

我坚持这个问题

<div id="example1">
    <div id="example2"> </div>
    <div id="example3"> </div>
</div>

我需要在示例2下将div与id example3对齐，如果它可能位于ID为example1的div的页脚和中心。我该怎么做？？我有几天尝试，更接近它就像这样。

CSS

#example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}


#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}

感谢您的帮助

Answer 1

首先，position:absolute不允许您设置边距。

另一方面，你有

margin:0;

正在重置左侧+右侧的auto。尝试

margin:0 auto;

这是一个JSFiddle，可以完成你想要做的事情（或多或少）。

修改

好的，但是现在你已经在float:left中引入了第三个问题，它将覆盖auto边距并始终向左浮动。

此外，我上面提到的问题还没有得到解决。总结一下：没有浮点数，没有绝对位置，并且尽量不要通过设置两次来覆盖边距。

您是否尝试在#example2和#example3之间留出17个像素的空间？这是一个更新后的链接，从最后一个开始，执行这一新行为：JSFiddle

Answer 2

通过CSS你认为你需要将绝对定位的div交换到“logo”（＃example2），然后你可以在示例3的顶部边缘以获得前170px的间距

示例：jsfiddle

尝试：

#example1{
    background: #eee;
    height: 250px;
    position: relative;
    overflow: auto;
}

#example2 {
    background: #444;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    height:152px;
    width:305px;
}

#example3 {
    background: #007;
    color: #fff;
    width: 300px; /* adjust to suit */
    height: 80px;
    margin: 170px auto 0 auto;
}

如果您不知道#example3的宽度 - 因此无法使用auto左右边距 - 那么您可以通过将其更改为{{1}来将其置于另一个中心位置并在display: inline-block

上设置text-align: center

将页脚中的div与另一个div对齐

2 个答案:

示例：jsfiddle