简介icon文字对齐是日常工作中最常见的，最早的学习一般使用vertical-align，但是由于一些inline-block元素在与文字对齐时表现很麻烦（见上一篇），linebox的高度高出几个px的情况大家应该都经历过。对于简单的暴力，也可以使用绝对定位的方式。flex布局出现后，很多时候使用flex居中对齐就非常方便了。实现如下，总结几种实现如下按钮样式的方法：.btn{display:inline-block;填充：6px12px；字体大小：14px；行高：20px；文本对齐：居中；空白：nowrap；游标：指针；-webkit-用户选择：无；-moz-用户选择：无；-ms-用户选择：无；用户选择：无；#ccc;border-radius:4px;}.btn:hover,.btn:focus{颜色：#333;背景色：#e6e6e6；border-color:#8c8c8c;警告inline-block对齐的思路很简单。使图标与文字对齐，使第i个元素的高度与文字的行高一致并对齐，然后使图标背景居中。问题在于如果inline-block元素中没有inline元素，它的基线就是margin的底边。这样在与文字对齐的时候，就会出现上下错开的情况，从而增加linebox的高度。在这种情况下，我们只需要让第i个元素的基线与文本的基线保持一致，就可以保证与文本对齐。解决方案是在其中包含文本而不显示文本：.icon{display:inline-block;宽度：20px；高度：20px；//等于行高text-indent:-9999em;//隐藏文本white-space:nowrap;}.icon::before{content:'icon';}.icon-info{background:url(./info-circle.png)no-repeatcenter;}使用元素来插入文本，并使用大文本缩进隐藏文本达到了预期的效果绝对定位法说到绝对定位法，想必大家都知道。给按钮元素设置relative，然后是图标的绝对定位：.btn{...position:relative;padding-left:32px;}.icon{position:absolute;宽度：20px；高度：20px；left:12px;}如果上层元素不影响绝对定位，其实可以省略按钮的相对定位，直接使用无依赖的绝对定位，并用margin-left调整position:.btn{...padding-left:32px;}.icon{position:absolute;宽度：20px；高度：20px；margin-left:-20px;}flexlayoutmethod这个直接给按钮设置display:inline-flex;align-items:center;综上所述，可以选择使用哪种方式，但第一种方式希望大家仔细思考，多多学习内联元素对齐的知识。
