将表格中心化为div块

时间:2013-12-11 18:06:57

标签: css html

给出了以下表单和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,我们只有水平居中?

1 个答案:

答案 0 :(得分: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