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

クロームインスペクターで試してみましたが、正常に動作します...

于 2012-08-19T14:35:51.547 に答える
1

cssを次のように変更します。

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

編集：

ここにフィドルがあります：http：//jsfiddle.net/FlameTrap/x6vPH/

于 2012-08-19T13:28:37.120 に答える
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

私は物事に幅を設定するのが好きではありません。そのため、センタリングにインラインブロックを使用するのが好きです。

<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 に答える