jquery - 带引导程序的中心跨度

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类。这是您需要的代码。此外，这是一个工作小提琴：链接到小提琴

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 类 pagination-centered 像这样：

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

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

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

在引导程序 2.3.0 中。使用 classtext-center 但它需要使用这两个类之一，row或者span12使用text-align: center.

演示

http://jsfiddle.net/xKSUH/

或者

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

您可以通过创建单独的 css 类来将其居中：

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

演示

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>