杂记——图标与文字垂直居中

如题的一个小问题，提供我用过的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）达到居中效果。