定义和用法
vertical-align
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
应用
vertical-align的作用对象是 inline-level element,也就是内联级元素。内联级元素指的是其CSS属性display
的属性值为:
- inline
- inline-block
什么是基线
基线就是元素内文本的下沿线,这个文本指的是小写字母x
,所以字母x
的下边缘(线)就是我们的基线
基线的位置确认
vertical-align的默认值baseline
的含义是将元素的基线与父元素的基线对齐。
确定元素的基线(baseline)
display:inline-block
:内联块元素的基线(baseline)位置的确定规则分为三种情况
- 元素盒子里没有内容,是一个空的盒子时,baseline的位置为该盒子margin-bottom的边界(如果margin-bottom为0,那就是盒子的下边界)
- 元素盒子里有内容,并且其overflow属性值为 visible(默认值)时,那么该盒子的baseline的位置就是内部内容的最后一个内容元素的baseline的位置
- 元素盒子里有内容,但是其overflow属性值为非 visible(比如 overflow: hidden ),那么该盒子的baseline位置就是该盒子 margin-bottom 的边界
确定父元素的基线
父元素的基线是由其子元素的基线位置确定的。
父元素基线所在的位置是取子元素的基线中与父元素顶部距离最大的那个子元素的基线位置
元素的对齐
相对父元素的基线对齐