在内联块内垂直对齐div

Question

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

在小提琴中，您可以看到第一列，带有“将我放在中间”的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

如果您能够为只有一个孩子的那些容器手动添加一个类，则可以这样做：

http://jsfiddle.net/Lzzyywf2/6/

<div class="inlineb one-child">
    <div class="insideInline">Hello</div>
</div>

结合：

.one-child:before {
    content: "";
    display: block;
    height: 25px;
}

---

如果您无法添加课程，则可以在IE9 +中使用：

http://jsfiddle.net/Lzzyywf2/9/

.insideInline:only-child {
    display:block;
    margin-top:25px;
}

感谢OP改进这个想法！

Answer 2

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

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

Answer 3

Flex盒子会让您的生活更轻松：

.flex-contain{
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  width:900px;
  height:500px;
  background:#000;
  align-items:center;
  align-content:center;
  }

  .flex-item {
    height:200px;
    width:200px;
    background:yellow;
    margin:0 auto;
  }

http://codepen.io/cjthedizzy/pen/vEpyvR