css - Bootstrap 3 : Centering and fixing glyphicon labels

Question

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

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

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

我感觉是字形导致了这两个问题:

<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 中的文本，其中的跨度也将居中(如果设置为显示: block )。 H1 将占据容器元素的整个宽度——将它设置为 display:inline-block 是为了让这个例子看起来更好。

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