Question

给出了以下表单和css样式表：

index.html摘录

<div class="parent">
    <div class="child">
        <form>
            <input type="text"/>
            <br/>
            <input type="submit"/>
        </form>
    </div>
    <div class="helper"></div>
</div>

mycss.css摘录

.parent{
    width: 500px;
    height: 400px;
    text-align: center;
    border: 1px solid #dd0;
    background: #ffa;
}
.child {
    display:inline-block;
    vertical-align:middle;
}
.helper {
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}

上面代码的

There is result。但这个结果对我来说并不清楚。 {1}在这个例子中的作用是什么？

在div.helper样式类中，我们有div.parent。为什么没有它我们只有水平居中？

为什么text-align: center;或vertical-align:middle;中div.child只有div.helper，我们只有水平居中？

Answer 1

所以这里div.helper使用了display:inline-block＆amp; { vertcal-align:middle模式将另一个垂直中间设为.parent。

和

text-align: center;用于使输入元素居中于.parent

如上所述，

vertcal-align:middle用于使这些元素垂直居中于.parent。

但是还有其他简单，干净和更好的方法来做这个

您可以使用这种简单的方法来执行此操作：

只需更改CSS即可：

将diplay:table-cell;应用于.parent div，以便它能够将其子项垂直对齐。

然后将vertical-align:middle应用于同一个以使子元素在顶部中间

.parent {
width: 500px;
height: 400px;
text-align: center;
border: 1px solid #dd0;
background: #ffa;
display: table-cell;
vertical-align: middle;
}

并删除所有其他CSS和.helper div

<强> FIDDLE DEMO

将表格中心化为div块

1 个答案: