前几日做网页布局的时候内联块元素的对齐是彻底把我整蒙逼了，放好了就开始上下跳，各种对不齐，鹏哥给了个妙招叫vertical-align 不过对其的妙诀还是没有找到，本着一颗求知的心，在网上仔细看了看vertical-align的用法，参考黄老师的博客描述，略微了解了一些用法，在此跟大家分享一下。
闲言少叙，单刀直入。
vertical-align 垂直对齐 设置元素的垂直对齐方式。W3school中给出的说明是该属性定义行内元素的基线相对于该元素所在行的基线垂直对齐。所以，使用块元素又没有更改display还理直气壮的说咋还出不来效果的童鞋可以去捂脸了，垂直对齐的默认属性值是 baseline 基于基线对齐。
默认基线对齐方式
其中两个 img 标签和 span 标签是根据父级 div 中的文字 Writing的基线去对齐的，所以宽高、元素不同放在一行自然四处乱窜。
vertical-align还有其他属性
text-top:元素顶端与父级文字顶部对齐
top：元素顶部与行内高度最高的顶部对齐
middle：此元素放置在父元素的中部
text-bottom：元素底部与父级文字底部对齐
bottom：元素底部与行内最底部元素的底部对齐
这样解释，很容易可以看出 vertical-align 和 text-align 的区别：text-align 是设置在父级中的元素控制子元素的布局 。vertical-align 是设置在子元素内的属性，谁需要设置此属性，就把这个属性放在这个元素里
了解了vertical-align 的属性，它的应用就好理解了
垂直居中
单独给子集行内元素设置 vertical-align：middle；而没有其他元素时，是不会出现居中效果的，如果父级中存在文字，那设置middle的元素会跟文字的中间去对齐。这时，我们需要一个设置为内联块的 span 标签去辅助实现
来看代码：
基本结构
样式修改
注意：这里将 span 元素的高度设置为父级的100%，两个子集全部设置 middle 属性，img 标签就会被“带到”中间，产生垂直居中的效果。
效果图：
垂直居中效果图
当然，第二种方法是在 table-cell 属性元素中设置vertical-ailgn 使其在单元格中的位置发生变化，在此不赘述。
相关链接：黄老师的博客
其中引用了一张黄老师博客的图片，如有侵权请与作者联系
网友评论