css - 居中对齐子 div 并处理 float 和填充

Question

请考虑以下内容:http://jsfiddle.net/Yq39W/1/

HTML:

<div class="parent">
<div class="child1">
    Some text...
</div><div class="child2">
    2
</div><div class="child3">
<form>
    <input type="text" />
    <input type="text" />        
</form>
</div>
</div>

CSS:

.parent {
    width:100%;
    background:red;
    margin:0px;
    padding:0px;
}

.child1, .child2, .child3 {
    display:inline-block;
    border:1px solid black;
    padding:10px;
}

.child1 {
    background:blue;
    float:left;
}

.child2 {
    height:200px;
    background:yellow;
}

.child3 {
    background:green;
    float:right;
}

我如何垂直居中对齐子 div，而 child2 填充剩余空间？ (意思是child1和child3会稍微下移一点，这样中心就和child2的中心对齐了)

如果没有为任何 div 显式定义高度怎么办(在示例中，child2 显式设置为 200px)？是否仍然可以在垂直轴上对齐？

对我来说重要的是，没有显式定义任何尺寸(父宽度为 100% 以及元素上的任何填充/边距除外)。

希望大家帮帮忙! :)

Answer 1

假设您的意思是垂直居中子元素为 2，然后删除 float s 并添加 vertical-align: middle;因为它们已经是display: inline-block .无需声明特定高度，无论最高的元素是什么，它们都将彼此垂直对齐。

在demo , 我用 <br />让 child 2 在没有明确高度设置的情况下变得更高只是为了演示。

演示: http://jsfiddle.net/shshaw/jnE89/

您可能想要设置 max-width: 33%给 children ，这样他们就不会去多行，但这取决于你想要的效果。

奖励:如果您愿意，可以使用 text-align: justify在父级上以确保您的框覆盖可用空间，如网格(请参阅 Text-align: Justify and RWD 或 updated demo ；请注意，在 HTML 中，框之间必须有空格才能工作)