inline-block 元素会造成垂直不居中？
在使用 inline-block 时发现，这个属性不仅会造成水平方向的间隙(这应该是 inline 属性造成的)， 但是为什么会造成垂直不居中？
例如
<div class="wrap">
<span class="icon-xx">
<span>这是文本</span>
</div>[class*=" icon-"] {
display: inline-block;
}
.wrap {
height: 30px;
line-height: 30px;
}
这样却没法使icon标签垂直居中，只有使用类似 设置 .wrap font-size: 0;等方法才能使它居中，这样写起来好麻烦。。不知道大家在写icon的时候都是怎么搞？float ？
写回答
-
IT从业float:left的元素会脱离原始的文件流，已经和你的<a>没有关系了，能对齐纯属巧合（可以预见的巧合^_^）。但是inline-block和你的<a>是在同一行的，inline-block的那个元素地位是和<a>是一样的。然后这个元素和根据设置的vertical-align对齐，是整个元素其与<a>对齐，所以这个元素中的某一行时候不与<a>中文字对齐也是正常的。从你的图看来你设置的那个
inline-block应该就是一个div，它默认的vertical-align是baseline。对于内部有文本的div他的baseline是最后一行文本的baseline(不同浏览器也不太一样)，没有的就是下边缘(包括margin)，这样就导致了baseline对齐了div的baseline`也就是说文字底部靠上一点点儿(baseline)对齐了div的下边缘。想要实现对齐你可以把
inline-block的元素设置vertical-align:middle，保险起见的话a也设置成这个2019-07-17 19:25:35赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
