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

【问题标题】：Left/Center/Right DIVs with Vertical Alignment具有垂直对齐的左/中/右 DIV
【发布时间】：2013-09-13 12:06:29
【问题描述】：

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

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

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

谢谢！

编辑：

TyBlitz，你为我指明了正确的方向。谢谢！但是，在您的容器 div 高度 - 内部 div 高度上，您需要除以 2。例如：

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

还需要使用文本对齐（左/中/右）让所有内部 DIV 达到 33% 并不令人兴奋，但它可以工作。似乎我应该能够使它们具有可扩展的宽度并仍然正确定位它们。这是我嵌入的示例图像：My Fiddle

【问题讨论】：

如果您喜欢 tyblitz 的回答，请接受 n 回答或至少投票。

标签： css html center vertical-alignment

【解决方案1】：

Like so?

只需浮动 3 个 div，给每个 div 一个高度，将它们相对定位（重要！）并给它们一个 top: container.height - innerdiv.height; 例如。 container.height 为 114 & innerdiv.height 为 50 => 114-50 = 64=> top: 64px;

编辑：好吧，如果您不想让您的 div 全部为 33% ，通过一些简单的数学运算，您可以使用 float 和 margin 属性大致定位您的 div。 p>

我更新了你的this fiddle。

它背后的数学是：

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

【讨论】：

Tyblitz，很接近，但我希望中心 DIV 始终居中，无论宽度如何，左/右始终位于最左侧和最右侧。如果我为每个（右/中/左）DIV 去掉 33% 的宽度，它们最终会一个接一个地左对齐
@RichP 编辑了我的答案，它更适合你吗？

【解决方案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/

请注意：

在 html 中，右 div 声明在中间 div 之前。
我的解决方案（css 垂直对齐）不适用于 IE7 或更低版本。

【讨论】：

【解决方案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

希望对你有帮助

【讨论】：