你如何得到中心内容使用Twitter引导?

我想用一个非常基本的例子。使用入门页面和网格系统，我希望如下:

< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >

.．.会产生居中的文本。

然而，它仍然出现在最左边。我做错了什么?

当前回答

在我这边，我定义了新的CSS样式，易于使用和记忆:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

这是个好主意吗? 有什么好的做法吗?

2012-08-27 18:33:29

其他回答

这是关于文本居中的(这就是问题的内容)

关于其他类型的内容，请参阅Flavien的回答。

更新:引导2.3.0+答案

最初的答案是bootstrap的早期版本。从引导2.3.0开始，你可以简单地给div命名为.text-center类。

原始答案(2.3.0之前)

您需要用text-align: center定义这两个类中的一个，row或span12。见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/

2012-02-07 21:43:32

在保持响应性(移动兼容性)的同时，我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空span1 div。

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

2012-09-12 09:47:35

从2013年2月开始，在某些情况下，我在“span”div中添加了一个“centric”类:

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

和CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

这是因为span* div被浮动到左边，而“自动边缘”居中技术仅在div没有浮动的情况下才有效。

演示(在JSFiddle上):http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

2013-02-26 08:34:01

添加答案。希望它能帮助到别人

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div class='d-flex flex-row justify-content-center'>
      <img     
        className='img-fluid'       
        src="<url>"
          />
    </div>
    </div>
</div>

2022-07-24 15:57:32

在我这边，我定义了新的CSS样式，易于使用和记忆:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

这是个好主意吗? 有什么好的做法吗?

2012-08-27 18:33:29

你如何得到中心内容使用Twitter引导?

推荐文章

最新文章

标签