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}

这将起作用。

Answer 2

http://jsfiddle.net/T7cVg/8/这个怎么样？我已经更新了 jsfiddle。这对你有用吗？

.circle {
    color: #fbfbfb;
    width: auto;
    height: auto;
    -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: normal;
    margin: 0 10px 0 0;
    float:left;
    padding:1em 2%;
}

.circle [class^="icon-"],
.circle [class*=" icon-"] {
    line-height: normal
}