Question

尝试设置114px高和100％宽（页面宽度）的外部DIV。在里面，我想要三个DIV左，中，右。这些内部3个div的高度各不相同。我希望所有三个内部DIV都从上到下居中（垂直对齐）。

我已经左右和左右近距离浮动：0和右：0但是卡在垂直居中的部分上。左右DIV仅包含图像中心文本。很难在jsfiddle上显示图像，所以我不能提供很多例子，抱歉。

我找到了顶部和底部对齐的示例，但没有以运气为中心。

谢谢！

编辑：

TyBlitz，你指出我正确的方向。谢谢！但是，在容器div高度 - 内部div高度上，则需要除以2.对于您的示例：

114-50=64 then divide by 2 = 32 for top.

还需要使用text-align（左/中/右）不要兴奋使所有内部DIV 33％，但它的工作原理。好像我应该能够让它们具有可扩展的宽度并且仍能正确定位它们。这是我的小提琴示例图像嵌入：My Fiddle

Answer 1

Like so?

简单地浮动3个div，给它们每个高度，相对定位它们（重要！）并给它们top: container.height - innerdiv.height;例如。 container.height of 114＆amp; innerdiv.height为50 =＆gt; 114-50 = 64 =＆gt; top: 64px;

编辑：好吧，如果你不想让你的div全部为33％，只需要一些简单的数学运算，你可以用float和margin大致定位你的div。属性。

就像你的this fiddle一样，我更新了。

背后的数学是：

Container.length - combined innerdiv.length = unoccupied.length
margin-left: unoccupied.length / x (eg 50px / 5 = margin of 20% = 10px)

Answer 2

我认为这可以解决您的问题，但您必须创建3个包装器div。

<强> HTML

<div class="outer">
    <div class="leftDiv">
        <div class="leftInnerDiv">Left Div</div>
    </div>
    <div class="rightDiv">
        <div class="rightInnerDiv">Right Div</div>
    </div>
    <div class="centerDiv">
        <div class="centerInnerDiv">Center Div</div>
    </div>
</div>

<强> CSS

.outer,
.leftDiv,
.rightDiv,
.centerDiv{
    height: 114px;
}

.leftDiv{
    float: left;
}
.rightDiv{
    float: right;
}
.centerDiv{
    overflow: hidden;
}

.leftDiv:before,
.rightDiv:before,
.centerDiv:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.leftInnerDiv,
.rightInnerDiv,
.centerInnerDiv{
    vertical-align: middle;
    display: inline-block;
}

.leftInnerDiv{
    background-color: red;
}
.rightInnerDiv{
    background-color: green;
}
.centerInnerDiv{
    background-color: blue;
}

jsfiddle链接：http://jsfiddle.net/pv6yJ/1/

请注意：

右边的div在html中的中间div之前声明。
我的解决方案（css vertical align）在IE7或更低版本上不起作用。

Answer 3

我创建了这个例子来展示如何垂直对齐容器并使用列数（css3），这将自动将3个div布局为3个相等的列。

-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;

对于非支持浏览器（IE），您只需将宽度设置为33％并向左浮动。

http://codepen.io/tom-maton/pen/oqsEJ

希望这有帮助

具有垂直对齐的左/中/右DIV

3 个答案: