Bootstrap 3：居中和固定字形标签

Question

这是我的jsFiddle 完整代码示例。

我试图实现以下无济于事：

• 我希望glyphicon-globe 居中显示在“社区”标签 (<h1>) 上方，并且我希望所有三个元素（字形图标、<h1> 标题和@987654325 @副标题）在屏幕中间水平居中
• 我希望“社区”标签以正确的字体显示（看看删除字形图标后会发生什么...）

我感觉字形图标导致了这两个问题：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1><span class="glyphicon glyphicon-globe"/>Community</h1>
            <h3>A free online community to all new fizz-comers.</h3>
        </div>
    </div>
</div>

也许这是某种格式错误或导致奇怪的 CSS 规则触发。有什么想法吗？

Answer 1

span 标签不应该是自动关闭的。 Here's a better explanation.

This updated example 应该按照您想要的方式设置标题和图标的样式。通过将 H1 中的文本居中对齐，其中的 span 也将居中（如果设置为 display: block）。 H1 将占据容器元素的整个宽度 - 将其设置为 display:inline-block 是为了使这个示例看起来更好。

<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>