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

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/cc2293260/article/details/51035592

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

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

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

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

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距离,在空出来的地方放图片。

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

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

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

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

展开阅读全文

没有更多推荐了,返回首页