web前端入门到实战：文本图标对齐的几种解决方案

白T恤架构师

于 2020-05-12 21:53:15 发布

阅读量1k

点赞数

分类专栏： css 文章标签： html css 前端 web前端前端开发

本文链接：https://blog.youkuaiyun.com/ITHHH111/article/details/106086046

版权

本文探讨了web前端开发中常见的文本图标对齐问题，从浏览器的默认对齐方式出发，详细解析了包括居中对齐、使用span包裹文本、flex布局、ex单位以及vertical-align数值法在内的五种对齐方案，帮助开发者解决实际项目中的对齐困扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的对齐问题：

浏览器是基于什么对齐图标和文本的？
为什么明明使用了 flex或vertical-align，图标还是看起来差了 1 像素没对齐？

文字图标布局

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

html部分：

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

css部分：

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }

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