深入理解CSS前言vertical-align
时间：2023-03-31 12:42:49
CSS
vertical-align用于指定inline或table-cell元素的垂直对齐方式。也就是说，对于块级元素，vertical-align是不起作用的。vertical-align的各种属性值vertical-align的属性值可以分为以下四类：线型，如baseline、top、middle、bottom；文本类型，例如text-top、text-bottom；上标和下标类型，如sub、super；数字百分比类，例如10px、1em、5%；line类baseline，baseline是vertical-align的默认值，表示基线对齐，所谓baseline是指字母x的下边缘，具体可以参考上一篇文章深入理解CSS的行高。不懂的朋友建议先看这篇文章。我们来看一个例子，代码如下：.box{width:100px;行高：100px；border:1pxsolid#ccc;text
效果如下：由于基线是默认值，所以不是有必要写。.box的line-height是100px，其实是为“strut”设置的。node，继承了line-height），所以.text对齐到节点的基线（可以想象这个不可见的节点有一个字母x，.text对齐到字母x的下边缘）aboutbaseline，需要注意的一件事是inline-block元素。如果一个内联块元素中没有内联元素，或者溢出不可见，则该元素的基线是其外边距的下边缘；否则，它的基线是内联元素的元素基线中的最后一行。示例如下：.text{display:inline-block;宽度：100px；高度：100px；border:1pxsolid#ccc;
text 效果如下follows:top，对于行内元素，是指元素的顶部与当前行框的顶部对齐；对于table-cell元素，指的是元素的toppaddingedge与tablerow的顶部对齐。例子如下：.box{width:100px;行高：100px；border:1pxsolid#ccc;}.top{line-height:normal;vertical-align:top;
