74

以下のコードがあり、外側の「行」divの「ウェル」要素を中央に配置したいと思います。text-align：center（テキストを中央に配置するだけで、内部のDIV要素は中央に配置しない）などのさまざまなアプローチを試しました。

これがjsfiddleです。アイデアは、私が「よく」タイルのページを取得し、4かそこら後にそれが折り返されるということです。ただし、4未満の場合は、ページの中央に表示されます。

<body class="container-fluid">
    <div class="row">
        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>

        </div>

        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>
        </div>
    </div>
</body>
4

4 に答える 4

196

Bootstrap 4には、このためのcssクラスがあります。以下は、行のコンテンツを中央に配置します。

<div class="row justify-content-center">
  ...inner divs and content...
</div>

詳細については、 https ：//v4-alpha.getbootstrap.com/layout/grid/#horizo​​ntal-alignmentを参照してください。

于 2017-12-12T01:53:01.227 に答える
75

私は次のようにしてこれを解決しました：

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>
于 2012-11-19T22:35:02.777 に答える
20

Bootstrap 4の場合、次のコードを使用します。

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

参照：https ：//getbootstrap.com/docs/4.0/utilities/spacing/#horizo​​ntal-centering

于 2018-02-10T11:31:26.037 に答える
18

これを試してみてください、それはうまくいきます！

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

次に、cssで、ドキュメントのcenterdivとcenterの幅を定義します。

.center {
    margin: 0 auto;
    width: 80%;
}
于 2015-04-04T13:21:22.627 に答える