对之前css居中的一点补充
1. 单行文字居中
设置line-height等于元素高度即可
2. 多行文字居中
2.1 table-cell里对span居中
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#right{
width: 100px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: blue;
}
#right span{
display: inline-block;
vertical-align: middle;
}
</style>
<div id="right">
<span>这是内容这是内容这是内容这是内容这是内容</span>
</div>
用一个span标签将所有的文字封装起来，但缺点是外部div不能用浮动
2.2 table和table-cell结合
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#con{
width: 500px;
height: 200px;
margin: 20px auto;
background-color: gray;
display: table;
}
.right{
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: blue;
}
</style>
<div id="con">
<div class="right"><span>这是内容这是内容这是内容这是内容</span></div>
<div class="right"><span>这是内容这是内容这是内容这是内容</span></div>
<div class="right"><span>这是内容这是内容这是内容这是内容</span></div>
</div>
2.3 line-height
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.right{
width: 100px;
height: 200px;
margin: 20px auto;
background-color: gray;
text-align: center;
vertical-align: middle;
line-height: 200px; /*父元素设置等高行高*/
}
.right span{
display:inline-block; /*子元素设置inline-block*/
line-height: 20px; /*覆盖父级元素的行高*/
vertical-align: middle; /*基线居中对齐*/
}
</style>
<div class="right">
<span>这是内容这是内容这是内容这是内容</span>
</div>
