关于图标和文字对齐的方法整理。

关于图标和文字对齐的方法整理。

标签的图标修饰很常见。但是通常都会遇到小图标和文字对齐的若干问题。尤其是图标和文字字号不一致的时候，怎么对齐都觉得不自然。

当然我今天不讨论自不自然的问题。

网上关于这个问题的博客帖子写了很多。我大概收集整理了一下。找到了以下相关的方法。

1.vertical-align属性。

大家最普遍的回答是利用vertical-align属性来调整。
其实呢 ，这个属性很多人的理解都有偏差，大多数的人认为就和text-align的使用方法类似。
但是其实，这是两个完全不同性质的属性。

vertical-align属性的意思是当前元素在父元素中的排列的垂直位置，同时还包含了当前元素和兄弟元素之间的关系。

通常取值有baseline（基线对齐）、top（顶端对齐）、middle（中线对齐）、bottom（底端对齐）等等。

其中很有意思的是基线对齐。很多人都不理解基线的意思，其实主要的原因就是，基线这个概念，是来自英文字体里的。也就是我们写英文的时候第二格的底线。也就是大部分字母（占上两格或中间一格）的底线。在中文中通常，基线在文字底部往上1/5的位置附近。所以这个取值在中文和图标的对齐上几乎没有参考意义。

第二个取值呢，top是指当前元素与本行里最高的元素的顶端对齐。如果是一排元素，当然就得都设置了顶端对齐才能实现吊灯的效果（高高矮矮统一挂在天花板上）。

同理呢，bottom取值的效果就是平地摆花瓶的效果。middle的效果就是中间对称的一排（父元素的中线。）当然些东西，都是一排兄弟元素都必须设置vertical=align属性。

vertical-align还有另外两个属性。text-top和text-bottom值。分别是与父元素中文字的顶端和底端对齐。作用效果可以自己试验一下。

2.添加包含盒子。在盒子中使用margin属性调整位置

这种方式，相对比较容易理解，实现起来相对也更可控一点。但是这个方法在实现代码上会花更多的时间。用更多的代码，可以有更多的方法来实现，但是，冗余的代码不应该是前端编程里的主流思想。

3.将图片设置成文字的背景。

这个方法实现简单，可控性也比较强（可以用背景图片位移调整），在文字的侧边要留出足够的padding距离，在空出来的地方放图片。

这个方法需要注意的地方就是，图片如果是单独的图标文件，需要设置背景的不重复。如果使用雪碧图，切图的时候在图标的左侧或者右侧不能有其他图像干扰，需要在放文字的位置做成透明。

以上就是几个简单方法。另外，图标和文字的排列是否和谐,主要因素还在于图标设计的规范，现在已经有一些专用的图标字体。可以直接使用。另外也有一些开源的图标库可以使用。

过段时间我再专门整理一下图标字体和图标库相关资料。

总之，图标和文字混合排列，关键在于图标设计的规范上。当图标设计规范的时候，排列会特别简单。