1

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;

}

4

6 回答 6

2

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

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

在 chrome 检查器中尝试过，效果很好...

于 2012-08-19T14:35:51.547 回答
1

您是否希望将@content 居中？如果是这样试试这个。

    <div class="span12 pagination-centered">
于 2013-01-31T23:42:59.750 回答
1

试试这个。我从twitter 问题跟踪器中得到它 

 <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>

希望这会有所帮助

于 2013-03-04T15:52:46.513 回答
1

将css更改为：

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

编辑：

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

于 2012-08-19T13:28:37.120 回答
1

我不喜欢为事物设置宽度。这就是为什么我喜欢使用 inline-block 进行居中。

<div style="text-align: center;">
  <div style="display: inline-block; text-align: left;">
    <p>I'm so centered</p>
  </div>
</div>
于 2013-11-07T22:12:03.753 回答
0

创建一个 .center 类并围绕您想要居中的任何内容包装一个 div。

.center {
 text-align: center;
}

<div class="center">
  ... stuff ...
</div>
于 2013-11-07T23:14:30.530 回答