css - 如何让vertical-align:middle;起作用
本文介绍了css - 如何让vertical-align:middle;起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<html>
<meta charset="utf8">
<style>
.Absolute-Center {
display: table-cell;
width: 100px;
height: 100px;
border:1px solid red;
text-align:center;
vertical-align:middle;
}
</style>
<body>
<div class="Absolute-Center">
<p>居中</p>
</div>
</body>
</html>
显示效果如下：
可见：vertical-align:middle;起作用了。
下面增加一个div
<html>
<meta charset="utf8">
<style>
.outer{
width:300px;
height:500px;
border:1px solid red;
position:relative;
}
.Absolute-Center {
display: table-cell;
position:absolute;
margin:auto;
top:0px;
bottom:0px;
left:0px;
right:0px;
width: 100px;
height: 100px;
border:1px solid red;
text-align:center;
vertical-align:middle;
}
</style>
<body>
<div class="outer">
<div class="Absolute-Center">
<p>居中</p>
</div>
</div>
</body>
</html>效果如下：
可见：vertical-align:middle;不起作用了。
请问，
1。为何此时 vertical-align:middle;不起作用了。
2。此时如何使得vertical-align:middle;起作用了。
解决方案
position: absolute; display: table-cell; equals display: block; position: absolute;. 1#
And vertical-align only applies to inline/table-cell elements.
Solution: https://jsfiddle.net/dbLb68u1/
这篇关于css - 如何让vertical-align:middle;起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
