关于vertical-align失效 , 不起作用问题

vertical-align不生效等问题

有很多同学会发现,vertical-align这个属性有时生效有时一点效果都没有
那么这到底是怎么回事呢?

我在网上搜寻了各种资料以及官方文档查看了一圈

总结以下几点:

• 首先 看父元素是否设置了line-height(父元素是inline时可不用设置line-height )
• 并且 子元素本身是否为inline-block或inline (table-cell也可以理解为inline-block)

当父元素设置了line-height时
子元素设置vertical-align , 即 子元素相对于父元素的基点的对齐方式 (vertical-align的百分比取值是相对于父元素的line-height值)

当父元素未设置line-height时
只对行内兄弟元素的对齐有效 , 子元素无法相对于父元素的基点对齐(若兄弟元素都设置vertical-align:middle , 可使兄弟元素在一条基线上对齐)

正确使用vertical-align可用来

• 修复单选框/复选框与文本之间的不对齐问题
• 使用字体图标时的对齐问题
• 图片与文字的对齐问题等

注意事项

• 此属性不可继承 , 必须对子元素单独设置
• 浮动元素(当一个元素浮动后 , 必定成为block) 弹性盒以及栅格系统等 . 使用vertical-align无效

*欢迎大家指正 *