如何使用bootstrap 3将一个glyphicon放在圆圈中心

Question

我需要使用bootstrap 3将一个glyphicon置于img-circle div中。我编写了以下html代码：

<section>
        <div class="container">
            <div class="col-lg-4">
                <div class="img-circle center-block">
                    <span class="glyphicon glyphicon-map-marker glyphicon-aligned-center"></span>
                </div>
                <p class="aligned-paragraph-address text-center">#123 45678 901 <br/> St NW Pellentesque habitant</p>
            </div>
        </div>
</section>

在css中我写下面的代码：

.img-circle {
    width: 125px;
    height: 125px;
    background-color: #f5c63b;
}

.aligned-paragraph-address {
    padding: 1em;
}

.glyphicon-envelope, .glyphicon-phone, .glyphicon-map-marker {
    font-size: 50px;
    color: #ffffff;
}

.glyphicon-aligned-center {
    top: 35px;
    left: 35px;
}

它正在工作，但我认为这不是最好的做法。所以我需要帮助才能成为一名专业人士。

Answer 1

通常当我需要居中时我会使用margin：0 auto;

您也可以将其写为margin-left：auto; margin-right：auto;

但第一个解决方案是代码更少。如果是文本，您可以尝试text-align：center;

祝你好运。如果这对您有用，请告诉我。