在CSS3圆内水平和垂直居中

请看看这个

我想做的是让css3中的圆形图标居中（水平和垂直）。我做错了什么

正如你们所看到的，信封放在左边，电话也放在左边。换句话说，图标的位置不在中心

CSS

HTML

这样行。

这个怎么样？我已经更新了JSFIDLE。这对你有用吗

.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
}

---

对我来说，它非常居中，但是如果您不满意，请随意更改

行高

值。这是我屏幕上的屏幕。实际上，您与字体无关，您将其设置为

text align:center，那么它应该是。尝试更改
字体大小
，它可能会工作。
<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>

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

.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
}