关于vertical-align的一点心得
程序员文章站
2024-03-14 17:18:28
...
1、vertical-align起效的元素：inline or inline-block
2、vertical-align的top和bottom的参照是line-box的高度。
3、line-box的高度是height或者line-height中最高的那个。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试vertical-align</title>
<style>
#main{
height:200px;
border: 3px solid blue;
}
#vertical,#vertical2{
display: inline-block;
width:100px;
height:100px;
border: 1px solid red;
vertical-align:bottom;
}
#vertical2{
height:130px;
}
</style>
</head>
<body>
<div id="main">
<div id="vertical">
</div>
<div id="vertical2">
</div>
</div>
</body>
</html>此时line-box的高度就是130px，此时结果：
再来看另一种情况：
#vertical3{
height:100px;
border: 1px solid green;
}
#vertical3 span{
vertical-align: bottom;
}
<div id="vertical3">
<span>vertical-align:bottom</span>
</div>理想的情况是文字在div的下方，结果：
其原因是：
虽然div的height是有100px，但是span所在的line-box的高度仍然是span元素的line-height高度，所以此时vertical-align好像不起作用。
对上述代码做点修改：
#vertical3{
height:100px;
border:1px solid green;
line-height: 50px;
}
#vertical3 span{
font:15px "Microsoft YaHei UI",sans-serif;
vertical-align: bottom;
}这里给其父元素添加了line-height:50px;
效果：
不过这里发现一点疑问：如果span元素不加font-family这一属性的话，在Firefox和Chorme（只测试了这两个浏览器）下vertical-align:bottom无效。
我个人猜测是因为line-height的垂直居中性导致文字一直在line-height高度的中部从而导致vertical-align:bottom无效；而font-family会导致line-height的垂直居中性失效？
上一篇： 关于使用markdown的一点心得
下一篇： 关于Mysql存储过程的一点心得