在下面的演示中,第一个div看起来是垂直居中的,但第二个div不是。
如何CSS他们的共同类,使他们都居中?换句话说,无论文本有多少行,如何将div文本垂直居中?
.divs {
/*position:absolute;*/
font-size: 18px;
box-sizing: border-box;
display: inline-block;
background-color: #ffcc99;
width: 140px;
height: 80px;
padding-top: 30px;
/*padding-bottom: 30px;*/
margin-top: 0;
float: left;
margin-left: 98.5px;
word-wrap: break-word;
vertical-align: middle;
line-height: normal;
}
<div>
<div class="divs">1234567890</div>
<div class="divs">12345678901234567890123</div>
</div>
<div>
<div class="divs">1234567890</div>
<div class="divs">12345678901234567890123</div>
</div>
<style>
.divs{
font-size: 18px;
box-sizing: border-box;
display: inline-block;
background-color: #ffcc99;
width:140px;
height:80px;
padding-top:30px;
/*padding-bottom: 30px;*/
margin-top:0;
float:left;
margin-left: 98.5px;
word-wrap: break-word;
text-align: center;
line-height: normal;
width:inherit;
}
</style>
设置text-align为居中,如果你想让它在中间