图标，文字对齐

Question

一个按钮包含图标，文字时，大家有什么较好的写法？对齐问题是怎么解决的?
这是支付宝首页的，看了下源码使用的绝对定位：
我写的demo,使用vertical-align: -2px，慢慢调出来的
效果：

地址：http://jsfiddle.net/o6h0w8u5/
源码：

<div class="ub-chat">
    <i></i>
    聊天
</div>

 body{
     background-color: #EFEFEF;
 }
.ub-chat{
    display: inline-block;
    border-radius: 3px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background-color: #fff;
    color: #ff6230;
    width: 120px;
    font-size: 15px;
}
.ub-chat i{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: transparent url(http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/bottom_chat@2x.png) no-repeat center center;
    background-size: 16px auto;
    margin-right: 4px;
    vertical-align: -2px;
}

Answer 1

1. 按钮外部：
   猜想的是两个按钮放在一个 div 下，然后 div 的 width 是 body 的 100%，内容属性设置为：text-align: center，这样做的好处是无论浏览器窗口大小，两个按钮总能居中显示。
   看了一下原网页的代码结构，也是这样设置的。
   至于您说的绝对定位，不太理解具体是指什么意思，匆匆找了一下，在源码里面没找到相关的内容，可能是自己疏忽了。

2. 按钮内部：
   我大概拉了一下标尺，如下图：
   
   文字前面有 icon，这样的样式我的解决方案一般是：icon 作为文字所在标签属性的背景插入，文字部分设置 text-indent 属性缩进就可以解决背景被文字遮挡的问题了。

PS：但是文字距按钮边缘的右边距和 icon 距按钮边缘并不相等，个人觉得设置为相等是否更好。不过这又是另一个问题了。

Answer 2

参考，我就不再写一边了
http://segmentfault.com/q/1010000002779505

Answer 3

难道……你是想发文章？http://segmentfault.com/write

Answer 4

vertical-align: middle 就好了吧

Answer 5

不知道这样的效果你满意否。
如：

.icon-style {
           width:3em
           height:3em
        display:-webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
    }
<div class="icon-style">
    <span class="icon-trash"></span>
</div>

Answer 6

我采用简单粗暴的方法直接flex， align-items:center