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