css - 在 CSS3 圆内水平和垂直居中

Question

请看这个

http://jsfiddle.net/T7cVg/7/

我想要做的是获得带有居中图标的 css3 圆圈(两者:水平和垂直)。我做错了什么？

http://screencast.com/t/bpxIefbf

如您所见，信封留在左侧，电话也是。换句话说，图标的位置不在中心。

CSS

.circle {
    color: #fbfbfb;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #b0b8c2;
    font-size: 11px;
    font-weight: 200;
    color: #d9dfe6;
    text-align: center;
    cursor: pointer;
    line-height: 19px;
    margin: 0 10px 0 0;
    float:left;

}

HTML

<div class="circle">
        <i class="icon-facebook"></i>
    </div>
    <div class="circle">
        <i class="icon-twitter"></i>
    </div>
          <div class="circle">
                            <i class="icon-phone"></i>
                        </div>

                        <div class="circle">
                            <i class="icon-envelope"></i>
                        </div>

Answer 1

[class^="icon-"], [class*=" icon-"] {line-height: 20px}

这会起作用。