行動裝置（安卓裝置、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>

我一般使用的方法：
（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}

也可以實現絕對的居中對齊。

其實不管是line-height還是用position去定位，不管你display用的什麼，不同機型的顯示效果都會不一樣。

水平上的差距幾乎沒有，垂直方向上的效果會多種多樣。

遇到這種ui，我的做法是把圖片寫在::before裡，用margin去定位，這樣不管右側的文案是否絕對的垂直居中，但至少圖是相對文案去定位的，是和文案對齊的。

說下我自己常用的兩種辦法（我也一直沒什麼太好的辦法）：
第一種：

//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;
}

不知道有沒有更好的辦法了。 。

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

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

    <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;
 }

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

關閉

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

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

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

雷雷