Html 使用引导网格居中文本行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38661118/
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
Centering text in row with bootstrap grid
提问by Nicolas Barlogis
I was starting to write a mock-up for a project. Basically, I use bootstrap grids to get a structure like this:
我开始为一个项目编写模型。基本上，我使用引导网格来获得这样的结构：
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">...</div>
<div class="col-xs-6">Main Title</div>
<div class="col-xs-4">...</div>
</div>
</div>
Here is a complete fiddle: https://jsfiddle.net/f8fn9Los/4/
这是一个完整的小提琴：https: //jsfiddle.net/f8fn9Los/4/
What I want to do is to center the Main title, not in its column but in the whole row. Is there any way to do this, while keeping this grid structure?
我想要做的是将主标题居中，而不是在其列中，而是在整行中。有没有办法做到这一点，同时保持这种网格结构？
Ps: I know I can do this in other ways, but I was just wondering if there is some way to achieve this with grid.
Ps：我知道我可以通过其他方式做到这一点，但我只是想知道是否有某种方法可以通过 grid.js 来实现这一点。
Thanks!
谢谢！
采纳答案by frnt
See you have already used .text-centeron you .project-namewhich align text to center, so what I could suggest is that try pseudo selector ::beforeas below,
看到您已经使用.text-center过.project-name将文本对齐到center，所以我建议您尝试pseudo selector ::before如下，
.text-center::before{
content:"";
margin-left:calc(100% - 75%);
}
回答by Zachary St Amant
this would be what your looking for.
这将是你要找的。
<section>
<div class="container">
<div class="row">
<div class="col-xs-12 center-block text-center">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</section>
回答by Mr. Perfectionist
You can take another row only for Main Tittle
你可以只为另一排 Main Tittle
<div class="container-fluid">
<div class="row">
<h1 class="text-center">Project Name</h1>
</div>
</div>
Then you can put another row for other elements.
然后您可以为其他元素放置另一行。
回答by alex141097
You can try using the col-xs-offset-* class of bootstrap.
您可以尝试使用 bootstrap 的 col-xs-offset-* 类。
Have a look at this link for more details on this: enter link description here
请查看此链接以获取更多详细信息：在此处输入链接描述
