图标（图片）+文字垂直居中

最新推荐文章于 2022-09-15 19:55:39 发布

雨中青衣浮

最新推荐文章于 2022-09-15 19:55:39 发布

阅读量437

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_37302082/article/details/84306674

版权

web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

App开发有好多地方都会用到图标+文字的形式，例如下图：

但是图标和文字怎么也对不齐，视觉上不是偏上就是偏下。。。

之前常用的文字垂直居中，height==line-height，图片用margin进行定位，可是，总会有几px的差距。如下图，可以看到1、2的实现方式文字偏上，3完美实现了，先上图：

从网上找了各种方法，第一个，vertical-align: middle; display: inline-block;不好用，偏上。

       <div class="div-one">

           <img class="img1" src="img/marker.png" /> 这个是一段文字测试居中

       </div>

.div-one {
               height: 100px;
               width: 500px;
               margin: 20px;
               border: 1px solid #007AFF;
               line-height: 100px;
           }

.img1 {
               vertical-align: middle;
               display: inline-block;
           }

2、将图片作为背景图放到i中，不行，偏上。

<div class="div-two">
           <i class="icon"> </i>
           <span class="span-text2"> 这个是一段文字测试居中</span>
       </div>

   .div-two {
               height: 100px;
               width: 500px;
               margin: 20px;
               border: 1px solid #007AFF;
           }

           .icon {
               display: inline-block;
               vertical-align: middle;
               height: 24px;
               width: 24px;
               background: url(img/marker.png) no-repeat center;
               background-size: 100%;
           }

           .span-text2 {
               font-size: 16px;
               line-height: 100px;
           }

3、重点来了，第三个完美实现了，并且代码量少。用flax布局， display: flex; align-items: center; justify-content: left;

<div class="div-three">
           <img src="img/marker.png" />
           这个是一段文字测试居中
       </div>

   .div-three {
               height: 100px;
               width: 500px;
               margin: 20px;
               border: 1px solid #007AFF;
               display: flex;
               align-items: center;
               justify-content: left;
           }