前端 - 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-->
<p class="close-btn">
    <i class="icon-close-hmc"></i>
    <p class="close-txt">
        关闭
    </p>
</p>

//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，沒有什麼相容性問題，個人覺得還是比較好用的。

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

    *{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）絕對定位

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

    *{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 部分
<p class="close-btn">关闭</p>

//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 部分
<p class="close-btn">
    <img src="http://s1.mi.com/m/images/20151028/top-x.png" width="20px">
    关闭
</p>
// 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

規定好字號，及圖片大小，用相對定位 或 作為背景圖片，下面是相對定位：

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

* {
  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 >p{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調整，佈局方面：

關閉

給關閉多加一個p標籤，這樣可以達到樓主想要的結果，不管外面怎變變，圖片和文字都是對齊的。

ps：如果要做兩個元素絕對對齊，可以優先考慮display:table;(父級) display: table-cell;(子級)，這兩個真可以算是最佳搭配，而且屢試不爽。 vertical-align: middle;只在display:inline;（行內元素起作用）

Answer 8

直接上flex佈局，用多了你會發現傳統的寫法沒有一個能比得上彈性盒子來得爽。

Answer 9

除了上面說的各種方法外，我覺得最方便的還是乾脆用個 字符圖標 代替那個圖片嘛。方便的很！

Answer 10

雷雷