2013-02-27 84 views
6

我知道如何在CSS中水平居中对齐div。您需要将宽度设置为小于100%,并在左侧和右侧都有自动边距。我想要做这个默认样式的Twitter Bootstrap。我不想写额外的CSS。想知道是否可以使用Twitter Bootstrap中使用的默认样式。中心使用默认的Twitter引导CSS水平对齐div

要设置div的宽度,我正在使用span*。但span*float: left。有没有什么课程,可以设置div的宽度,但不会添加float: left

+0

你可以发表你已经尝试过的扫管笏?或者创建一个jsfiddle。 – Shail 2013-02-27 13:48:17

+0

看起来,因为所有的网格元素都是向左浮动的,所以没有办法将它们和它们的内容居中,而无需编写一些自定义样式。那就是说,一个人如何在没有这样做的情况下建立一个网站? – isherwood 2013-02-27 14:36:10

+0

您可以通过添加类'.clearfix'来删除浮动内容 – Rockbot 2013-02-27 15:52:47

回答

9

要水平对齐使用均匀跨度样式(span2,span4等)的div,您需要使用偏移量。

<div class="offset3 span6"> 
    ... 
</div> 
+0

如果要居中的内容位于span1,span3,span5,span7,span9或span11中,该怎么办? – 2013-02-27 13:59:04

+0

如果这是一个奇怪的跨度,你必须坚持精确的跨度大小,那么你将需要求助于添加一些自定义的CSS。 – JayGee 2013-02-27 15:00:50

3

使用类pagination-centered内一个div像:

<div class="row"> 
    <div class="span12 pagination-centered"> 
    <p> content</p> 
    </div> 
</div> 
+0

OP询问Bootstrap类,而不是原始HTML。 – isherwood 2013-02-27 14:07:42

+0

@isherwood记住你..我没有给他的HTML ..那些CSS属性。 – Shail 2013-02-27 14:12:13

+0

CSS属性实际上是HTML。 OP再次要求上课。 – isherwood 2013-02-27 14:19:52

0

如果要对齐水平元素为奇数跨度(@JayGee),你不想将写额外的CSS(不甚至是内联?),那么答案应该是:不,这是不可能的。否则,我会去@ JayGee的回答。

2

Bootstrap的方式似乎是通过分配class="center-block"它:a link to Bootstrap 3 doc page

但是,它不适用于标题或段落。 class="text-center"似乎在这些情况下工作。

0

基于@ JayGee的回答。

<div class="row"> 
    <div class="col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-4 col-md-4 col-lg-4"> 
    ... content here ... 
    </div> 
</div>