Question

我有一个未知数量的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;
}

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

:only-child尝试.insideInline。如果父元素中只有一个元素，这将以元素为目标。 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;
}

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

在内联块内垂直对齐div

3 个答案: