Question

我尝试了很多解决方案，但没有任何工作。我有一个可变高度的div，它包含三个并排的div。这很有效。

现在我想要三个div中的两个（左边和中间的一个）垂直居中。但它不会起作用。我尝试使用行高（适用于图片），但行高必须与窗口高度相同。

这是我的html：

<div id="outerDiv">
    <div id="LeftDiv">
        <img id="imgArrow" src="images/arrow.png">
    </div>
    <div id="middleDiv">
         <div id="buttonDiv" class="linkButton"></div>
    </div>
    <div id="rightDiv">
         <img id="imgIpad" src="images/ipad.png">
    </div>
</div>

我的CSS：

#outerDiv{
    overflow:hidden;
    width:100%;
    border: 0px solid;
    background-color:#e4ecfe;
}
#middleDiv{
    width: 35%;
    float: left;
    border: 1px solid;
}
#leftDiv{
    margin: auto;
    width: 35%;
    float: left;
    left: -10%;
    border: 1px solid;
    text-align: center;
}
#rightDiv{
    width: 28%;
    text-align: right;
    float: left;
}
#buttonDiv{
    text-align: center;
    border:1px solid; 
    border-radius:5px; 
    color:white;    
    line-height: 140%;
    font-family: Arial;
}

我尝试了什么？就像我说的那样，我尝试使用行高，但高度是可变的（取决于窗口的大小）。我也尝试了#outerDiv:before，但它也没有用。

有什么建议吗？

编辑：

JSFiddle：http://jsfiddle.net/5cT2T/

解决方案：

获取每个jQuery的高度，并使用以下代码设置margin-top：

var height = $(window).height(),
    middleHeight = $("#middleDiv").height(),
    leftHeight = $("#leftDiv").height();
$('#leftDiv').css('margin-top', (height - leftHeight) / 2);
$('#middleDiv').css('margin-top', (height - middleHeight) / 2);

Answer 1

如果你想将一个div垂直居中于另一个div中，最常见的tecnique是“position：absolute”内部div在外部div中，为位置设置“top：50％”。

这样做会使内部div的上边界达到外部div高度的50％，所以只需在内部div添加一个负“margin-top”。负边距的值等于其高度的一半。

如果我正确理解你想要的东西......只需将LeftDiv和MiddleDiv包装在一个容器中，然后在容器和LeftDiv之间应用建议的tecnique！： - ）

垂直居中div中的两个div

1 个答案: