vertical-align:
baseline:默认值,字母abcd的底部
text-bottom;文字底部,大概会和字母g的底部
middle:整体的中部
top:整个容器的顶部
bottom:整个容器的底部
super:上标的位置
sub:下标的位置,会比textbottom低一点(super 比text-top 低一点,原因不清楚)
数值:相对于baseline的高度,可以是负值,(经常用以修复 checkbox radio 与文字不对其问题,负值向下,正值向上)
<!DOCTYPE html><html>
<head>
<title>测试水平居中问题</title>
<meta charset="gbk">
<style>
.myDot {
height: 2px;
width: 2px;
background-color: #000000;
display: inline-block;
}
.container {
height: 30px;
border: 1px solid black;
line-height: 30px;
font-size: 12px
}
</style>
</head>
<body>
<div class="container">
我是在测试 图片水平居中问题abcdefg
<span class="myDot" style="vertical-align: top"></span>
<span class="myDot" style="vertical-align: text-top"></span>
<span class="myDot" style="vertical-align: super"></span>
<span class="myDot" style="vertical-align: middle"></span>
<span class="myDot" style="vertical-align: baseline"></span>
<span class="myDot" style="vertical-align: text-bottom"></span>
<span class="myDot" style="vertical-align: sub"></span>
<span class="myDot" style="vertical-align: bottom"></span>
<span class="myDot" style="vertical-align: -2px;"></span>
</div>
</body>
</html>