关于图标和文字对齐的方法整理。
关于图标和文字对齐的方法整理。
标签的图标修饰很常见。但是通常都会遇到小图标和文字对齐的若干问题。尤其是图标和文字字号不一致的时候，怎么对齐都觉得不自然。
当然我今天不讨论自不自然的问题。
网上关于这个问题的博客帖子写了很多。我大概收集整理了一下。找到了以下相关的方法。
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距离，在空出来的地方放图片。
这个方法需要注意的地方就是，图片如果是单独的图标文件，需要设置背景的不重复。如果使用雪碧图，切图的时候在图标的左侧或者右侧不能有其他图像干扰，需要在放文字的位置做成透明。
以上就是几个简单方法。另外，图标和文字的排列是否和谐,主要因素还在于图标设计的规范，现在已经有一些专用的图标字体。可以直接使用。另外也有一些开源的图标库可以使用。
过段时间我再专门整理一下图标字体和图标库相关资料。
总之，图标和文字混合排列，关键在于图标设计的规范上。当图标设计规范的时候，排列会特别简单。
关于图标和文字对齐的方法整理。相关推荐
- 图标和文字对齐的方法
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, 1 2 3 4 5 6 <div> ...
- html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法 的相关资料,希望小伙伴们看了有所帮助. 在平时 ...
- echarts legend 图例形状、图标与文字对齐
1.设置图例的图标形状,参考此文章 2.图标与文字对齐,参考此文章 legend: {icon: "roundRect",left: 'right',data: ['最高分','平 ...
- 图片和文字对齐的方法
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: base ...
- 文字符号设计方法整理1--笔画字形（体）处理方法
文字符号设计方法1--笔画字形(体)设计方法 ---- 精思巧形 文字符号设计方法分类整理 不论是图形还是字体设计(文字符号设计)都是为了更好的传达信息,让文字的意义更好更准确的传达. ...
- css 图标和文字对齐 —— 垂直居中对齐，任意位置对齐
造成图标和文字排版困难的原因 1. 图标本身并不居中 2. 目标图标大小和文本大小/行高不匹配 解决方案 1. 使用 "子绝父相" 的css定位方法,将图标设置为绝对定位,通过 l ...
- html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容
张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-bloc ...
- Word 里文字对齐推荐这4种方法
转自:微点阅读 https://www.weidianyuedu.com 59:40 发布 27651 收藏 7 分类专栏: 程序mp 文章标签: Word 版权 程序mp 专栏收录该内容 97 ...
- 不必再狂按空格键了！Word 里文字对齐推荐这4种方法
我们在用Word写论文.制作简历的时候,通常会遇到把word中某些特定文字对齐的情况.那么问题来了,你平时都是怎么对齐文字的?傻傻的用空格来对齐吗? 在字符数不等的情况下,加空格不仅麻烦而且不准确,下 ...
最新文章
- 后端必备 Git 分支开发：规范指南
- R语言中if else、which、%in%的用法
- Linux System Programming --Chapter Nine
- ccls提示找不到文件
- 树莓派4B设置静态IP
- 六、Go编程语言中的函数式编程
- IPSEC非单播流量处理
- 安装服务时出现The system cannot execute the specified program
- HTML元素定义 ID，Class，Style的优先级
- paip.文件读写api php java python总结.txt
- php5.2 xampp,使用XAMPP，如何將PHP 5.3替換為PHP 5.2？
- 美洽客服-移动应用 SDK for iOS开发指南
- python 读取.sgy地震文件到三维ndarray矩阵，(全网仅此一份)
- Java实现拼图小游戏（3）—— 添加图片（含JFrame源码阅读）
- 巧用CSS文件愚人节恶搞
- 跑步机上的精彩人生——Linus大神传奇
- iOS Swift之RxSwift初探
- Flink 生产环境配置建议
- 与心态相关的写作储备
- Pandas02--pandas基础