Question

http://elosource.herokuapp.com/

正如您在我的测试页面上看到的那样，内容在左侧网站中对齐。我想把它放在中心。

我读过 http://www.w3.org/Style/Examples/007/center.en.html但由于某种原因它无效。

我的内容看起来像这样

<div class="content">

        <div class="row">
            <div class="span">
               <img src="http://placehold.it/180x1200">
            </div>
        <div class="span12">
                @content
            </div>
            <div class="span">
                <img src="http://placehold.it/180x1200">
            </div>
        </div>

    </div>

我的css：

.content {
background-color: #fff;
display: block;
margin-left:auto;
margin-right: auto;

}

Answer 1

你也应该在你的.content上设置一个宽度。像这样：

.content {
   margin: 0 auto;
   width: 1340px;
}

在chrome检查器中尝试过并且工作正常......

Answer 2

将css更改为：

.content {
background-color: #fff;
display: block;
text-align: center;
}

修改

这是一个小提琴：http://jsfiddle.net/FlameTrap/x6vPH/

Answer 3

您是否希望以@content为中心？如果是这样，试试这个。

    <div class="span12 pagination-centered">

Answer 4

尝试this。我是从twitter issue tracker

得到的

 <div class="container">
    <div class="alert-message block-message info" style="margin:10px">
        <h3>Centered Layouts</h3>
        <div class="alert-message block-message success span12 offset1">
            <p>Layout for <code>span12 offset1</code></p>
        </div>
        <div class="alert-message block-message success span10 offset2">
            <p>Layout for <code>span10 offset2</code></p>
        </div>
        <div class="alert-message block-message success span8 offset3">
            <p>Layout for <code>span8 offset3</code></p>
        </div>
        <div class="alert-message block-message success span6 offset4">
            <p>Layout for <code>span6 offset4</code></p>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="alert-message block-message info" style="margin:10px">
        <h3>Split Layouts</h3>
        <div class="row">
            <div class="alert-message block-message success span6">
                <p>Layout for<code>span6</code></p>
            </div>
            <div class="alert-message block-message success span4 offset4">
                <p>Layout for <code>span2 offset6</code></p>
            </div>
        </div>
        <div style="clear:both"></div>
    </div> 
</div>

希望这会有所帮助

Answer 5

我不喜欢设置宽度。这就是我喜欢使用内联块进行居中的原因。

<div style="text-align: center;">
  <div style="display: inline-block; text-align: left;">
    <p>I'm so centered</p>
  </div>
</div>

Answer 6

创建一个.center类并将div包装在您想要居中的任何位置。

.center {
 text-align: center;
}

<div class="center">
  ... stuff ...
</div>

Twitter Bootstrap - 集中内容

6 个答案: