css如何实现图标和文字的“绝对对齐”呢？

Question

前端实现图标和文字对齐有什么解决方法？我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的，最好也能实现pc上的对齐。

demo：https://jsfiddle.net/nzfbzxw6/

虽然我通过设置

vertical-align: -3%;

实现的对齐（在chrome上看着好好的），如果我要在手机设备上安卓，就要是另一个数值。
ios可能又要设个数值（而且不同的苹果机型也不一样）。

对这种问题有什么更好的解决方法吗？

-------------------------- 一个调皮的分割线 ----------------------------------------

各位前辈的方法我都试了一下，发现在安卓手机上都不好使，图片居中是没有问题的，但是文字（尤其是小于12px下的）却无法居中，这可能是安卓手机bug吧...

（第一个box盒子，第二个display：inline-block，第三个background center）

Answer 1

移动端（安卓设备、ios设备）图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局，可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题，一般不推荐使用弹性盒子，依旧只能采用传统方式（vertical-align: middle;或者position定位）实现图标文字对齐。

<!--html-->
<div class="close-btn">
    <i class="icon-close-hmc"></i>
    <div class="close-txt">
        关闭
    </div>
</div>

//css
<style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            .close-btn {
                display: -webkit-box;
                display: box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                box-align: center;
                -webkit-align-items: center;
                align-items: center;
                background-color: #00BB9C;
                width: 80px;
                height: 40px;
                margin: 30px auto;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
            }
            
            .icon-close-hmc {
                display: block;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                background-image: url("http://s1.mi.com/m/images/20151028/top-x.png");
                width: 16px;
                height: 16px;
                margin: 0 10px;
            }
            
            .close-txt {
                font-size: 16px;
                color: #FFFFFF;
            }
        </style>

Answer 2

我一般使用的方法：
（1）使用display:table，没有什么兼容性问题，个人觉得还是比较好用的。

<div class="close-btn">
    <div class="img-responsive">
        <img src="http://s1.mi.com/m/images/20151028/top-x.png">
    </div>
    <div class="close">关闭</div>
</div>

    *{padding:0;margin:0;}
    .close-btn{background:red;color:#fff;height:45px;width:120px;border-radius:5px;text-align:center;display: table}
    .img-responsive , .close{display: table-cell;vertical-align: middle}

随意改变close-btn的高度，也能够居中。

（2）绝对定位

<div class="close-btn">
    <div class="img-responsive">
        <img src="http://s1.mi.com/m/images/20151028/top-x.png">
    </div>
    <div class="close">关闭</div>
</div>

    *{padding:0;margin:0;}
    .close-btn{background:red;color:#fff;height:45px;width:120px;border-radius:5px;text-align:center;position: relative}
    .img-responsive , .close{position: absolute; top:50%; transform: translate(0, -50%);}
    .close { margin-left: 30px}

也可以实现绝对的居中对齐。

Answer 3

实际上不管是line-height还是用position去定位，不管你display用的什么，不同机型的显示效果都会不一样。

水平上的差距几乎没有，垂直方向上的效果会多种多样。

遇到这种ui，我的做法是把图片写在::before里，用margin去定位，这样不管右侧的文案是否绝对的垂直居中，但至少图是相对文案去定位的，是和文案对齐的。

Answer 4

说下我自己常用的两种办法（我也一直没什么太好的办法）：
第一种：

//HTML 部分
<div class="close-btn">关闭</div>

//CSS 部分
.close-btn {
    color:#fff;
    height:45px;
    line-height: 45px;
    width:120px;
    border-radius:5px;
    text-align:center;
    background: url('http://s1.mi.com/m/images/20151028/top-x.png') red no-repeat 20px center;
    background-size: 20px 20px;
}

这种方法是直接把图片设置为背景。。然后背景居中。。

第二种：
这种办法比较粗暴。。直接把图片绝对定位，然后居中

// HTML 部分
<div class="close-btn">
    <img src="http://s1.mi.com/m/images/20151028/top-x.png" width="20px">
    关闭
</div>
// CSS 部分
.close-btn {
    position: relative;
    background:red;
    color:#fff;
    height:45px;
    line-height: 45px;
    width:120px;
    border-radius:5px;
    text-align:center;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 20px;
}

不知道有没有更好的办法了。。

Answer 5

https://jsfiddle.net/lincenyi...

Answer 6

规定好字号，及图片大小，用相对定位 或者 作为背景图片，下面是相对定位：

    <div class="close-btn">
    <img src="http://s1.mi.com/m/images/20151028/top-x.png">
    <span class="text-close">
      关闭
    </span>
    </div>

* {
  padding:0;
  margin:0;
  font-size:14px;
}
.close-btn {
  background:red;
  color:#fff;
  height:45px;
  line-height:45px;
  width:120px;
  border-radius:5px;
  text-align:center;
 }
 img {
    height: 14px;
    position: relative;
    top: 2px;
    left: 0;
 }

Answer 7

*{padding:0;margin:0;}
.close-btn{display:table; background:red;color:#fff;height:45px;line-height:45px;width:120px;border-radius:5px;}
.close-btn >div{display: table-cell;vertical-align: middle;width: 40%; padding: 0 4px;}
.img-responsive{text-align: right; }
.img-responsive img{vertical-align: middle;width:18px;height:auto;}
.close-des{text-align: left}
以上是针对楼主的demo的css调整，布局方面：<div class="close-des">关闭</div>给关闭多加一个div标签，这样可以达到楼主想要的结果，不管外面怎变变，图片和文字都是对齐的。

ps：如果要做两个元素绝对对齐，可以优先考虑display:table;(父级) display: table-cell;(子级)，这两个真可以算是最佳搭配，而且屡试不爽。vertical-align: middle;只在display:inline;（行内元素起作用）

Answer 8

直接上flex布局，用多了你会发现传统的写法没有一个能比得上弹性盒子来得爽。

Answer 9

除了上面说的各种方法外，我觉得最方便的还是干脆用个 字符图标 代替那个图片嘛。方便的很！

Answer 10

.icon,
.text{
    display:inline-block;
    vertical-middle:middle;
}

Answer 11

元素和元素之间不要出现空格。需要实现距离用margin。

Answer 12

只是针对你这个问题的话，可以去掉 <img src="http://s1.mi.com/m/images/20151028/top-x.png">,直接用字符串×或者×代替。

Answer 13

前边的回答已经说了,需要设置为inline-block,
具体的原理推荐张鑫旭的
CSS深入理解之vertical-align

http://www.imooc.com/learn/542

Answer 14

一般都用背景和定位的方法。vertical-align不好控制，和字体也有关系。

Answer 15

举个例子，四条属性，在文字中插入图标可以用这个办法

Answer 16

inline-block的元素对齐都比较麻烦。所以如果条件允许，我会选择用flex居中。

Answer 17

<div class="box">

<i></i>
<span>测试</span>
<span>普通门票</span>

</div>

i,span{

display:inline-block;
vertical-align: middle;

}

Answer 18

使用一个div将图片与文字包裹起来，在div里对齐了就行

Answer 19

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;

Answer 20

有的时候非常恶心的偏移了1px，然后就手动margin:-1px之类的调整，还有我怎么感觉文字或者inline的元素，总会有一点点莫名其妙的padding存在

Answer 21

文字和图标都设置display:inline-block;vertical-align:middle;这个方法大部分情况下都是可以对齐的。但是，如果是父元素定高的按钮，当图标和文字都设置了vertical-align: middle时，图标和文字可以对齐，而相对于父元素不会却垂直居中（偏下），这是由于空格和行高造成的，可设置父元素font-size:0或line-height:0。

Answer 22

img, .wenzi{display:inline-block;}
.wenzi{margin:0 0 -8px 0} 试试

Answer 23

将文字和icon分别vertical-align: middle;就好了，我每次都是这样做的