twitter-bootstrap Bootstrap：在 div 中居中标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22857001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Center a header within a div
提问by elersong
I'm running into the same issue whenever I try the solutions posted to questions that are similar to mine. The header text simply ignores everything. Here is the problem markup; it's a really simple three column row.
每当我尝试发布到与我类似的问题的解决方案时，我都会遇到同样的问题。标题文本会忽略所有内容。这是问题标记；这是一个非常简单的三列行。
<div class="row">
<div class="col-md-4">
<h3 class="events">Upcoming Events</h3>
</div>
<div class="col-md-4">
<h3 class="register">Signup</h3>
</div>
<div class="col-md-4">
<h3 class="search">Search Here</h3>
</div>
</div>
Furthermore, here is my CSS, which I have added in on top of the standard Bootstrap CSS.
此外，这是我的 CSS，我在标准 Bootstrap CSS 之上添加了它。
h3.earnings, h3.register, h3.search {
text-align: center
}
Regardless of any styling tricks I use, the header text simply remains left-justified within it's parent div column. What am I missing, which would allow me to properly format my layout?
不管我使用什么样式技巧，标题文本只是在其父 div 列中保持左对齐。我错过了什么，这可以让我正确格式化我的布局？
回答by Albzi
Use text-centeras a class next to col-md-4.
使用text-center作为未来的一类col-md-4。
eg:
例如：
<div class="row">
<div class="col-md-4 text-center">
<h3 class="events">Upcoming Events</h3>
</div>
<div class="col-md-4 text-center">
<h3 class="register">Signup</h3>
</div>
<div class="col-md-4 text-center">
<h3 class="search">Search Here</h3>
</div>
</div>
Or if you just want the h3,
或者，如果您只想要h3,
<div class="row">
<div class="col-md-4">
<h3 class="events text-center">Upcoming Events</h3>
</div>
<div class="col-md-4">
<h3 class="register text-center">Signup</h3>
</div>
<div class="col-md-4">
<h3 class="search text-center">Search Here</h3>
</div>
</div>
text-centeris built into bootstrap, so you might as well use it. :)
text-center内置于引导程序中，因此您不妨使用它。:)
回答by Umair Hafeez
I have created a Fiddle hereusing your code and it is working fine. I guess that problem is that you put your CSS on the top of Bootstrap CSS and it is then overwritten in the remaining Bootstrap CSS. Try putting your CSS after the Bootstrap CSS and see what happens.
我在这里使用您的代码创建了一个Fiddle，它运行良好。我猜这个问题是你把你的 CSS 放在 Bootstrap CSS 的顶部，然后它在剩余的 Bootstrap CSS 中被覆盖。尝试将您的 CSS 放在 Bootstrap CSS 之后，看看会发生什么。
HTML:
HTML：
<div class="row">
<div class="col-md-4">
<h3 class="events">Upcoming Events</h3>
</div>
<div class="col-md-4">
<h3 class="register">Signup</h3>
</div>
<div class="col-md-4">
<h3 class="search">Search Here</h3>
</div>
</div>
CSS:
CSS：
h3.events, h3.register, h3.search {
text-align: center
}
