说它神奇,一是因为它的各个属性的呈现出来的效果跟我们预想的总是不一样,这是因为属性的规定中有几个关键点容易忽略;二是它会受到一些其他样式属性的影响。
- 适用元素:
- inline
- inline-block
- table-cell
- 它的属性中的几个关键点要先说明下,在下面看的时候要着重看:
- 基线的定义:元素中‘x’字母的底部所在的直线就是基线
- 参照点,即相对于谁的哪个属性,多数是相对父级
- 具体属性和定义:
- baseline(默认):元素基线与父元素的基线对齐。
- top: 元素及其后代的顶端与整行的顶端对齐。
- bottom:元素及其后代的底部与整行的底部对齐。
- text-top:元素顶端与父元素字体的顶端对齐。
- text-bottom:元素底端与父元素字体的底端对齐。
- middle:元素的中心与元素的基线加上小写x一半的高度值对齐。
注意’middle’属性的参照点:是父级元素基线再加上小写x的一半高度值,不是中心对中心。
另外一个要注意的重点是:
当元素是inline-block
,并且设置了overflow
的值不是visible
,此时元素中文本的对齐方式是这样的:元素的底部与父级元素的基线对齐,但是默认的vertical-align
的值还是baseline
,解决方案是:设置vertical-align: bottom
,让元素的底部与父级元素的底部对齐。