Question

这是我的jsFiddle，其中包含完整的代码示例。

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

我希望glyphicon-globe显示为居中并位于＆＃34; 社区＆＃34;标签（<h1>），我希望所有三个元素（glyphicon，<h1>标题和<h3>子标题）在屏幕中间水平居中
我想要＆＃34; 社区＆＃34;标签以正确的字体显示（请参阅删除glyphicon时会发生的情况......）

我有一种感觉，即glyphicon导致了两个问题：

<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中的文本，其中的跨度也将居中（如果设置为display：block）。 H1将采用容器元素的整个宽度 - 将其设置为显示：inline-block是使这个示例看起来更好。

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

Bootstrap 3：居中并固定glyphicon标签

1 个答案: