1

我查看了有关垂直对齐 div 的其他几篇文章，但我发现的解决方案似乎不适用于我的用例。我想将 div 与“我想要居中这个同时忽略其他两个 div”类垂直居中。

我在这里有一个关于 jsfiddle 的非常简单的示例。

谁能帮我解决这个问题？

代码：

HTML：

   <div id="container">
        <div class="I-want-to-ignore-this"></div>
        <div class="I-want-to-ignore-this float-right"></div>
        <div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
    </div>

CSS：

#container {

    height: 300px;
    width: 100%;
    border: 2px solid black;
}

.I-want-to-ignore-this{

    float:left;
    height: 75px;
    width: 100px;
    border: 2px solid grey;
}

.float-right {
    float: right;
}

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;

    margin: auto;
    vertical-align: center;
}
4

4 回答 4

1

将此添加到中心 div css：

position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;

margin从那里移除

将此添加到容器中：

position:relative;

编辑： JSFiddle

于 2013-06-18T17:22:26.727 回答
1

在评论部分，您指定您的容器将是固定高度。最简单的解决方案是使中心 div 的位置相对，并使用“top” CSS 属性将其向下移动到框的中心。

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;
    position:relative;
    top:70px;
    margin: auto;
    vertical-align: center;
}

这是更新的JSFiddle。

（注意：如果您的容器更改大小，则需要更新变量；但修复此解决方案应该可以正常工作）

于 2013-06-18T17:26:08.330 回答
1

我会简单地为您的中心 div 添加一个上边距：

.I-want-to-center-this-while-ignoring-the-other-two-divs {
    border: 2px solid green;
    height: 150px;
    width: 150px;
    margin: auto;
    margin-top: 73px;
}

由于您的父容器具有固定高度并且您的 div 具有已知高度，因此这是最简单的方法。

数学是： ( parent-height - (child-height+top-border+bottom-border) ) / 2

http://jsfiddle.net/audetwebdesign/7SfKW/10/

于 2013-06-18T17:31:26.247 回答
0 
.I-want-to-center-this-while-ignoring-the-other-two-divs{
    position:relative;
    top:25%;
    border: 2px solid green; 
    height: 150px;
    width: 150px;
    margin: auto;

}

检查这个：JSFIDDLE

您的容器高度为 300 像素，您想要居中的 div 为 150 像素。通过应用简单的数学来使 div 居中，您需要在上方垫 50px 和在下方垫 50px 以使 div 居中。所以top:25%会这样做。

只需将position和top属性添加到您的 css 中，如上所示

于 2013-06-18T17:28:10.400 回答