关于vertical-align的一点心得

来源：互联网发布：支付宝源码编辑：程序博客网时间：2024/06/06 01:23

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的垂直居中性失效？

阅读全文

0 0