关于vertical-align的一点心得

最新推荐文章于 2024-03-11 20:25:07 发布

guess_who_you_are

最新推荐文章于 2024-03-11 20:25:07 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/guess_who_you_are/article/details/76549561

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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