CSS实现文本对齐图片的方法

发布时间：2024-04-27 23:50:51 所属栏目：编程来源：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的使用有帮助。

（编辑：PHP编程网 - 襄阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!