Question

我对此问题以及this文章提出了很多疑问。我想将内部div放在顶部div元素中心。我能够成功的唯一方法是将顶部div显示为table-cell，但是当我这样做时，top div将不再是一个块，并且不会占用屏幕的整个宽度。

除了使用保证金之外，还有其他方法可以将其置于div中。

<div class="top">
    <div class="inside">
        <input type="text"></input>
    </div>
</div>



.top{
    height:40px;
    border:1px solid #000000;
    width:auto;
}

.inside{
    display:inline-block;
    vertical-align:middle;
}

.inside input{
    display:block;
}

jsfiddle

Answer 1

您可以使用此替代方法：

.top:before {
  content:" ";
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

演示 http://jsfiddle.net/8X4Ps/3/

这是如何工作的？

使用伪选择器:before，您可以生成内容元素并像处理任何其他标记一样处理每个属性。

在这种情况下，因为我们有一个带有display:inline-block的元素，那么为什么不将它与属性vertical-align垂直居中？

我们在这里遇到一些问题，因为这只适用于其他inline元素。这里:before可以帮助我们，我们需要的是一个内联元素，它接收容器的100% height，然后我们可以根据该元素对齐中间。

Answer 2

将.top设置为display:table，宽度为width:100%，并将.inside设置为display:table-cell

Fiddle

Answer 3

也许你可以使用填充？

.inside
{
display:inline-block;
vertical-align:middle;
width:100%;
padding-top:1em;
padding-left:25%;
padding-bottom:1em;
padding-right:25%;
}

.inside input{
display:block;
width:50%;
}

http://jsfiddle.net/aronez/8X4Ps/8/

它正在运作

招呼

Div垂直对齐

3 个答案: