雜記——圖標與文字垂直居中

如題的一個小問題，提供我用過的3種方法，優劣自鑑。

用到的小圖標

用到的css初始化代碼：

html { font-family: 'Microsoft YaHei'; font-size: 12px; }
body, html { margin: 0; padding: 0; }
ul, ol { padding: 0; margin: 0; }
li { list-style-type: none; padding: 0; margin: 0; }
img { display: inline-block /* 行內塊 */; margin: 0; padding: 0; border: none; }

方法一：

html代碼：

<ul id="ul1">
    <li>
        <img src="icon01.png" alt=""> 微博
    </li>
    <li>
        <img src="icon02.png" alt=""> 微信
    </li>
</ul>

css代碼：

#ul1 { width: 200px; height: 50px; margin: 50px auto 0; overflow: hidden; border: 1px solid #d9d9d9; }
#ul1 li { float: left; width: 50%; text-align: center; line-height: 50px; overflow: hidden; position: relative; }
#ul1 li:first-child:after { content: ''; display: block; width: 1px; height: 30px; background: #d9d9d9; position: absolute; right: 0; top: 10px; }
#ul1 li img { vertical-align: middle; margin-top: -4px; }

1. text-align: center; （內容水平居中）；
2. line-height: 50px; （讓文字垂直居中）；
3. vertical-align: middle; margin-top: -4px; （圖標居中）；

方法二：

html代碼：

<ul id="ul2">
    <li>
        <img src="icon01.png" alt=""> <span>微博</span>
    </li>
    <li>
        <img src="icon02.png" alt=""> <span>微信</span>
    </li>
</ul>

css代碼：

#ul2 { width: 200px; height: 50px; margin: 50px auto 0; overflow: hidden; border: 1px solid #d9d9d9; }
#ul2 li { float: left; width: 50%; height: 50px; text-align: center; overflow: hidden; position: relative; }
#ul2 li:first-child:after { content: ''; display: block; width: 1px; height: 30px; background: #d9d9d9; position: absolute; right: 0; top: 10px; }

#ul2 li:before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; }

#ul2 li img { vertical-align: middle; }
#ul2 li span { vertical-align: middle; }

1. text-align: center;（內容水平居中）；

2. 僞類的運用（#ul2 li:before），爲內容垂直居中做準備；

3. vertical-align: middle; （文字span，圖標img 垂直居中）；

方法三：

html代碼：

<ul id="ul3">
    <li>
        <img src="icon01.png" alt=""> <span>微博</span>
    </li>
    <li>
        <img src="icon02.png" alt=""> <span>微信</span>
    </li>
</ul>

css代碼：

#ul3 { width: 200px; height: 50px; margin: 50px auto 0; overflow: hidden; border: 1px solid #d9d9d9;  }
#ul3 li { box-sizing: border-box; float: left; overflow: hidden; position: relative; padding: 15px 26px; }
#ul3 li:first-child:after { content: ''; display: block; width: 1px; height: 30px; background: #d9d9d9; position: absolute; right: 0; top: 10px; }
#ul3 li img { float: left; margin-right: 4px; }
#ul3 li span { float: left; width: auto; height: 20px; line-height: 20px; }

1. 容器(#ul3 li)不設置寬高；
2. 文字和圖標通過浮動（float）變成塊狀元素；
3. 文字行高（line-height）和圖標的高度設置一致
4. 用填充屬性（padding）達到居中效果。