如何使用 bootstrap 3 将 glyphicon 居中在一个圆圈内答案

【问题标题】：How to center a glyphicon inside a circle using bootstrap 3如何使用 bootstrap 3 将 glyphicon 居中在一个圆圈内
【发布时间】：2015-06-10 18:27:32
【问题描述】：

我需要使用 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;
}

它有效，但我认为这不是最好的做法。所以我需要一个专业的帮助才能做到这一点。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 alignment

【解决方案1】：

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

你也可以写成 margin-left: auto;右边距：自动；

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

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

【讨论】：