中心文本水平使用Bootstrap？(Center Text Horizontally Using Bootstrap?)

中心文本水平使用Bootstrap？(Center Text Horizontally Using Bootstrap?)

我试图弄清楚如何使用Bootstrap水平居中文本。

可以说我有一个12格的空间。

我的目标是让文本占据中间的8个网格空间，每边有2个空网格。

我使用下面的代码来完成水平居中，但是我很好奇是否有另一种使用Bootstrap的方法？

谢谢！

.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

I am trying to figure out how to center text horizontally using Bootstrap.

Lets say I had a 12 grid space.

My goal is to have the text take up the middle 8 grid spaces with 2 empty grids on each side.

I used the code below to accomplish horizontal centering however I am curious if there is another way using Bootstrap?

Thanks!

.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

最满意答案

如果我正确理解了这个问题，你可以使用带偏移量的列

所以要占据中间的八个网格空间，每边有两个空格：

<div class="col-md-8 col-md-offset-2"> <p>Some text here</p> </div>

如果您希望文本居中在居中列中，请将类“text-center”添加到段落标记中。

If I'm understanding the question properly, you could use columns with an offset

So to take up the middle eight grid spaces, with two spaces on each side:

<div class="col-md-8 col-md-offset-2"> <p>Some text here</p> </div>

And if you want the text centered within the centered column, add the class "text-center" to the paragraph tag.