使用引导网格将文本居中 [英] Centering text in row with bootstrap grid

问题描述

我开始为一个项目编写模型。基本上，我使用引导网格来获得这样的结构：

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>

这是一个完整的小提琴： https://jsfiddle.net/f8fn9Los/4/

Here is a complete fiddle: 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：我知道我可以通过其他方式来做到这一点，但是我只是想知道是否还有一些方法可以做到这一点。

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.

谢谢！

推荐答案

您已经在 .project-name 上使用了 .text-center ，它将文本与对齐中心，所以我的建议是尝试使用伪选择器:: before 如下，

See you have already used .text-center on you .project-name which align text to center, so what I could suggest is that try pseudo selector ::before as below,

.text-center::before{
  content:"";
  margin-left:calc(100% - 75%);
} 

这篇关于使用引导网格将文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！