CSS实现文本对齐图片的方法
发布时间:2024-05-15 10:12:08 所属栏目:语言 来源:DaWei
导读: 在网站中我们常常能看到文本对齐图片的效果,但是对于两个行内元素的对齐,很多朋友尝试之后,发现居中对齐过程和实际实现的效果存在偏差,对此这篇文章就给大家来分享几个文本居中对齐图片
在网站中我们常常能看到文本对齐图片的效果,但是对于两个行内元素的对齐,很多朋友尝试之后,发现居中对齐过程和实际实现的效果存在偏差,对此这篇文章就给大家来分享几个文本居中对齐图片的方式,有需要的朋友可以参考。 html部分: <div class="wrap"> <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt=""> xx测试对齐Style- </div> 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、使用flex布局 display: flex; align-items: center; 不过就算是flex布局,有时候也会出现一点儿偏差,比如:图片尺寸为偶数、字体font-size为偶数,line-height为偶数时对齐;奇数时偏上1px。 具体参考可查看 iconSize 、 fontSize 和 lineHeight 之间奇偶关系 对齐误差 3、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; } 以上就是CSS中文本对齐图片的方法介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习css的使用有帮助。 (编辑:开发网_开封站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |