为什么vertical-align:middle;不起作用

css3

当DIV只有一层时 vertical-align:middle; 是起作用,为什么DIV嵌套基层就不起作用的。

下面这个是有作用的:

<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>

当嵌套几个时就不起作用了。那要如何处理呢。

给.center-inner加上 display: table; 然后给 p 加上 display:table-cell; 即可。

 

<html>
<meta charset="utf8">
<style>       
.outer{
      width:300px;
      height:500px;
      border:1px solid red; 
      position:relative;
}     
.center { 
      position: absolute;
      margin: auto;
      top:0px; bottom:0px; left:0px; right:0px;
      width: 100px; height: 100px; 
      border:1px solid red; 
}
.center-inner {
  display: table;
  height: 100%; width: 100%;
}
.center p {
  display: table-cell;
  text-align:center; vertical-align:middle;
} 
</style>
<body>
<div class="outer">
  <div class="center">
    <div class="center-inner">
      <p>居中</p>
    </div>
  </div>
</div>
</body>
</html>


如果发现下载不了或者地址失效,请联系客服QQ: 2323178881
找资料 » 为什么vertical-align:middle;不起作用

提供最优质的资源集合

立即查看 了解详情