先来看规范文档中对于vertical-align属性的定义及使用:
基线:就是英文小写字母x的下边缘。
常见的我们用于设置父元素内子元素(或子元素们)(为inline或inline-block)的对齐。
父元素为block,需设置line-height
如何实现子元素在父元素中居中(这里严格为垂直居中)?
- 若元素是
img
、input
等inline-block
元素(或还含有inline元素)。要想居中对齐,父元素可设置line-height
属性,并且属性值和width
值相同。所有子元素设置vertical-align:middle
即可 - 若元素只为
span
等的inline
元素。要想居中对齐,则父元素必须设置line-height
属性,并且属性值和width
值相同,此时,元素居中对齐父元素。子元素设置vertical-align
为其他值是起作用,不过,要重新设置子元素的line-height
。
若父元素不设置line-height
,子元素之间对齐,且对齐具有最大高度的子元素
父元素为inline-block,必须设置line-height。
-设置父元素的width
与line-height
值相同