引导3:对齐和修复图标标签
提问于 2014-11-05 19:17:26
下面是我的jsFiddle和完整的代码示例。
我正努力做到以下几点，但没有结果：
- 我希望
glyphicon-globe以居中的形式出现在“社区”标签(<h1>)上方，并且我希望所有三个元素(象形文字图标、<h1>标题和<h3>子标题)都在屏幕中间以水平为中心。 - 我希望使用正确的字体显示"Community“标签(请参阅删除图标时发生的情况.)
我有一种感觉，这两个问题都是由糖标引起的：
<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规则被触发。有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-05 19:34:17
跨度标签不应该是自动关闭的。这里有一个更好的解释。
此更新的示例应该以您想要的方式设置标题和图标的样式。通过在H1中对齐文本，其内部的跨度也将居中(如果设置为display: block)。H1将接受容器元素的全部宽度--将其设置为显示:内联块将使这个示例看起来更好。
<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26771150
复制
腾讯云开发者
