vertical-align:设置元素内容的垂直对齐,用于行内标签,可用于单元格td
语法:
vertical-align :baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比
效果展示:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8{
background-color: #f2f2f2;
height: 50px;
}
p{
font-size: 25px;
}
.box1 span{
font-size: 15px;
vertical-align: baseline;
}
.box2 span{
font-size: 15px;
vertical-align: sub;
}
.box3 span{
font-size: 15px;
vertical-align: super;
}
.box4 span{
font-size: 15px;
vertical-align: top;
}
.box5 span{
font-size: 15px;
vertical-align: text-top;
}
.box6 span{
font-size: 15px;
vertical-align: middle;
}
.box7 span{
font-size: 15px;
vertical-align: bottom;
}
.box8 span{
font-size: 15px;
vertical-align: text-bottom;
}
</style>
</head>
<body>
<div class="box1">
<p>基线baseline对齐<span>i love you</span></p>
</div>
<div class="box2">
<p>sub垂直对齐<span>i love you</span></p>
</div>
<div class="box3">
<p>super垂直对齐<span>i love you</span></p>
</div>
<div class="box4">
<p>top垂直对齐<span>i love you</span></p>
</div>
<div class="box5">
<p>text-top垂直对齐<span>i love you</span></p>
</div>
<div class="box6">
<p>middle垂直对齐<span>i love you</span></p>
</div>
<div class="box7">
<p>bottom垂直对齐<span>i love you</span></p>
</div>
<div class="box8">
<p>text-bottom垂直对齐<span>i love you</span></p>
</div>
<p>-------------------------------------------------------------------------</p>
<div style="height: 200px;width: 100%; background-color: #f2f2f2;display: table;text-align: center;">
<div style="display: table-cell; vertical-align: middle;">
<p>这是一行字(多行居中)</p>
<p>这也是一行字</p>
</div>
</div>
<div style="height: 200px;width: 100%; background-color: #f2f2f2;line-height:200px;text-align: center;">
<p>这是一行字(多行文字不能这样一起居中,这种方法只能当行文字居中)</p>
<p>这也是一行字</p>
</div>
</body>
</html>