在内联块内垂直对齐div

debugcn 发表于 Dev

tdoakiiii

我有一个未知数量的div，它将填充在一个内联块div中。看起来不错时，有一个以上的div没问题，但是当我只有一个div时，我希望它位于父级的中心。我想尝试在没有任何固定/绝对定位的情况下进行此操作，并希望不使用javascript。

在小提琴中，您可以看到第一列，带有“将我放在中间”的div应该在中间。

<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;
}

alexwc_

尝试:only-child了.insideInline。如果父级中只有一个元素，则此元素将定位到该元素。这是我的小提琴。

#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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。