您的位置 首页 css教程

css实现文本图标对齐的方法

开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:

html部分:

<div class="wrap">    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">    xx测试对齐Style-</div>

推荐教程:CSS入门教程

css部分:

.wrap {      width: 300px;      text-align: center;      margin: 20px auto;      font-size: 14px; } .wrap img {      width: 20px; }

未使用对齐方式的效果如下:

ea948867cf9545ab889d5f8db76bf5e.png

默认的对齐方式是 baseline ,也就是x字母的最下面那条线。

这也就回答了第一个问题,浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准,也就是 vertical-align:baseline; 。

常见的几种居中方案

1、使用 vertical-align 居中对齐方式

.wrap {    vertical-align: middle;    }.wrap img {    vertical-align: middle;}

当我们使用常用的 vertical-align 对齐文本和图片时,其实也是有一定的偏差的,如下图:

d8c555866345ebfb76239c518ceb68a.png

vertical-align 的middle值实际上是相对于小写字母x的一半高度来说的,所以图片会跟x的中间开始对齐,但是其他字符譬如S、中文,就会发现无论如何都会出现稍许偏差,图片会相对而言偏下。

2、使用 vertical-align 同时使用span包裹文本

让我们再稍做改变,将文本部分使用span标签包裹,并且对span使用 vertical-align: middle; 样式对齐。会发现此时图片会上移少许。

效果如下:

c3f20badc6c6099fce5bfe3f40cbc8e.png

3、使用flex布局

display: flex;align-items: center;

4e99512ec2d36a08d2862208d2fc12f.png

不过就算是flex布局,有时候也会出现一点儿偏差,比如:图片尺寸为偶数、字体font-size为偶数,line-height为偶数时对齐;奇数时偏上1px。

4、使用ex单位

ex就是小写字母x的高度,可以用在不受字体和字号影响的内联元素的垂直居中对齐效果。

PS:不过这种适用于图标高度跟文字一致,比如字符后面加一个箭头(点击展开)的情况,就很实用。

.wrap img {    height: 1ex;}

5、vertical-align 数值方式的使用

vertical-align 属性值可以使用数值型和百分比值,如,还是上面的基本案列:如果图片高度是20px,文字font-size为22px时,默认对齐是文字的基线,那么图片会偏上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;        }

相关视频教程推荐:css视频教程

以上就是css实现文本图标对齐的方法的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:css实现文本图标对齐的方法

文章地址:https://www.pyhw.net/33207_css%e5%ae%9e%e7%8e%b0%e6%96%87%e6%9c%ac%e5%9b%be%e6%a0%87%e5%af%b9%e9%bd%90%e7%9a%84%e6%96%b9%e6%b3%95.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图