中心跨越自举

Question

我有这个HTML代码：

<div id="header" class="row-fluid text-center">
    <div class="span1 text-center header">HOME</div>
    <div class="span1 text-center header">PORTFOLIO</div>
    <div class="span1 text-center"><img src="images/logo.jpg" /></div>
    <div class="span1 text-center header">ABOUT</div>
    <div class="span1 text-center header">CONTACT</div>
</div>

<div class="row text-center">
    <img src="images/header.png" />
</div>

我希望它集中在一起。我尝试使用offset类但不是100％居中。

Answer 1

因为你的行中有5个元素，你需要偏移3.5而不是偏移3才能使它完全居中。执行此操作的最佳方法是创建自定义offset3-5类。这是您需要的代码。此外，这是一个工作小提琴：Link to fiddle

HTML
<div class="cont"><div id="header" class="row-fluid text-center">
    <div class="offset3-5 span1 text-center header">HOME</div>
    <div class="span1 text-center header">PORTFOLIO</div>
    <div class="span1 text-center"><img src="images/logo.jpg" /></div>
    <div class="span1 text-center header">ABOUT</div>
    <div class="span1 text-center header">CONTACT</div>
</div>
</div>
<div class="row text-center">
    <img src="images/header.png" />
</div>

CSS
.row-fluid .offset3-5:first-child
{
    margin-left: 29.166666%;
}

上面的12个黑框代表一个引导行，红色框表示你的5个框。如果你有偏移量3，它将略微向左。解决方案是制作新的偏移量。为了获得正确的百分比，我做了（3.5 / 12）* 100得到29.166。您可以通过计算每一方面的数量然后执行相同的等式来制作您需要的任何自定义偏移量，但使用该数字而不是3.5。

Answer 2

试试这个

使用Bootstrap的css类以此为中心分页：

<div class="span12 pagination-centered">
    Center content.
</div>

以分页为中心已经在bootstrap.css

中

 .pagination-centered{text-align:center;}

在Bootstrap 2.3.0中。使用班级text-center 但它需要使用两个类中的一个，row或span12和text-align: center。

DEMO

http://jsfiddle.net/xKSUH/

或

http://jsfiddle.net/xKSUH/1/

您可以通过创建单独的css类来集中它：

.center {
   margin: 0 auto !important;
   float: none !important;
}

DEMO

http://jsfiddle.net/WesWz/9/

Answer 3

用

包裹

<div class="container">
</div>

父母需要一个固定的宽度才能让孩子居中。

Answer 4

尝试

<div class="row-fluid">
<div id="header" class="span12 header text-center">
    <div class="">HOME</div>
    <div class="">PORTFOLIO</div>
    <div class=""><img src="images/logo.jpg" /></div>
    <div class="">ABOUT</div>
    <div class="">CONTACT</div>
</div>
</div>