vertical-align你为何不生效

用vertical-align:middle。然而用的时候老是无效。因此决定看一看本身到底错在了哪里。

做用环境： 父元素设置line-height。

做用对象： 子元素中的inline-block和inline元素。

 

---

 

1、父元素设置 line-height

 

• 父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起做用。

• vertical-align不可继承，必须对子元素单独设置。

在父元素定义了line-height的条件下，vertical-align的做用是让（inline/inline-block）子元素依据父元素的基点对齐。

 

值	描述
长度	经过距离升高（正值）或下降（负值）元素。'0cm'等同于'baseline'
百分值 – %	经过距离（相对于1line-height1值的百分大小）升高（正值）或下降（负值）元素。'0%'等同于'baseline'
baseline	默认。元素的基线与父元素的基线对齐。
sub	下降元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
bottom	把对齐的子元素的底端与line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值。

---

 

关于做用环境

只有一个元素属于inline或是inline-block（table-cell也能够理解为inline-block水平）水平，其身上的vertical-align属性才会起做用。
所谓inline-block水平的元素，便可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认状况下会对vertical-align属性起做用。
对inline元素设置vertical-align是有做用的，只是要从新设置line-height的值，不然继承了父元素的line-height只能垂直居中。

---

 

 

2、当父元素没有设置line-height时，inline/inline-block子元素之间对齐。

• 当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，没法子元素居中对齐父元素。
• 设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐。

 

只设文字的vertical-align，则文字的中线对齐图片底线

 

只设图片的vertical-align，则图片的中线与文字的基线对齐

 

 

两个的vertical-align都为middle，则两个的中线互相对齐