css - 如何使用 bootstrap 3 将字形图标居中放置在圆圈内

Question

我需要使用 bootstrap 3 在 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;右边距:自动；

但第一个解决方案是减少代码。如果是文本你可以试试text-align: center;

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