Question

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并添加vertical-align: middle;，因为它们已经display: inline-block。无需声明特定高度，无论最高元素是什么，它们都将彼此垂直对齐。

在demo中，我使用<br />来让孩子2更高，而没有明确的高度设置只是为了演示。

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

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

加分：如果需要，您可以在父级上使用text-align: justify，以确保您的框覆盖可用空间，例如网格（请参阅Text-align: Justify and RWD或{ {3}};请注意，框中的框之间必须有空格才能使其工作）

中心对齐子div并处理浮动和填充

1 个答案: