vertical-align你为什么不生效

用vertical-align:middle。然而用的时候总是无效。所以决定看一看自己到底错在了哪里。

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

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

 

---

 

一、父元素设置 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只能垂直居中。

---

 

 

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

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

 

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

 

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

 

 

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

 

转载于:https://www.cnblogs.com/cz976230/p/10672791.html