常见的对齐问题:
浏览器是基于什么对齐图标和文本的?
为什么明明使用了 flex或vertical-align,图标还是看起来差了 1 像素没对齐?
文字图标布局
开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:
html部分:
xx测试对齐Style-
复制代码
css部分:
.wrap {
width: 300px;
text-align: center;
margin: 20px auto;
font-size: 14px;
}
.wrap img {
width: 20px;
}
复制代码
未使用对齐方式的效果如下:
默认的对齐方式是baseline,也就是x字母的最下面那条线。
这也就回答了第一个问题,浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准,也就是vertical-align:baseline;。
常见的几种居中方案
1、使用vertical-align 居中对齐方式
.wrap {
vertical-align: middle;
}
.wrap img {
vertical-align: middle;
}
复制代码
当我们使用常用的vertical-align对齐文本和图片时,其实也是有一定的偏差的,如下图:
vertical-align的middle值实际上是相对于小写字母x的一半高度来说的,所以图片会跟x的中间开始对齐,但是其他字符譬如S、中文,就会发现无论如何都会出现稍许偏差,图片会相对而言偏下。
2、使用vertical-align 同时使用span包裹文本
让我们再稍做改变,将文本部分使用span标签包裹,并且对span使用vertical-align: middle;样式对齐。会发现此时图片会上移少许。效果如下:
3、使用flex布局
display: flex;
align-items: center;
复制代码
不过就算是flex布局,有时候也会出现一点儿偏差,比如:图片尺寸为偶数、字体font-size为偶数,line-height为偶数时对齐;奇数时偏上1px。
具体参考可查看 iconSize、fontSize 和 lineHeight 之间奇偶关系 对齐误差
4、使用ex单位
这种方式是从张鑫旭老师的《css世界》中看到的,ex就是小写字母x的高度,可以用在不受字体和字号影响的内联元素的垂直居中对齐效果,PS:不过这种适用于图标高度跟文字一致,比如字符后面加一个箭头(点击展开)的情况,就很实用。
.wrap img {
height: 1ex;
}
复制代码
5、vertical-align 数值方式的使用
同样也是在张鑫旭老师的《css世界》中看到的,vertical-align属性值可以使用数值型和百分比值,
如,还是上面的基本案列:如果图片高度是20px,文字font-size为22p
x时,默认对齐是文字的基线,那么图片会偏上2px,这时只需要将图片向下偏移2px,就能实现对齐效果,而且vertical-align这个属性的数值型具有很好的兼容性。
.wrap {
width: 100%;
padding-top: 200px;
text-align: center;
margin: 20px auto;
font-size: 22px;
height: 40px;
}
.wrap img {
width: 20px;
vertical-align: -2px;
}
复制代码
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[记录文本图标对齐的几种解决方案]http://www.zyiz.net/tech/detail-120318.html