html - 在内联 block 内垂直对齐 div

Question

我有一个未知数量的 div，它们将填充到一个内联 block div 中。当有多个 div 时没有问题，因为它看起来不错，但是当只有一个 div 时，我希望它在父级中居中。我想尝试在没有任何固定/绝对定位的情况下执行此操作，并且希望不使用 javascript。

在 fiddle 中你可以看到第一列，带有“Put me in the middle”的div应该在中间。

http://jsfiddle.net/Lzzyywf2/5/

<div class="inlineb">
    <div class="insideInline">Hello</div>
</div>
<div class="inlineb">
    <div class="insideInline">Hello</div>
    <div class="insideInline">Hello</div>
</div>

.inlineb {
    min-height:102px;
    display:inline-block;
    border:1px red solid;
    vertical-align:top;
}
.insideInline {
    height:50px;
    border:1px solid blue;
}

Answer 1

为 .insideInline 尝试 :only-child。如果父元素中只有一个元素，这将以该元素为目标。 Here's my fiddle .

#wrapper {
}
.inlineb {
    min-height:102px;
    display:block;
    border:1px red solid;
    vertical-align:top;
    width:126px; /*or whatever value*/
}
.insideInline {
    height:50px;
    border:1px solid blue;
    display:inline-block;
    width:37px;/*or whatever value*/
}

.inlineb .insideInline:only-child {
    display:block;
    margin:0 auto;
}