web-dev-qa-db-ja.com

内容をBootstrap 4の列の中央に配置します

私は問題を解決するために助けが必要です、私はbootstrap4のコラムの中で内容を中心に置く必要があります、以下の私のコードを見つけてください

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
twitter-bootstrapflexboxbootstrap-4
53
Praveen Kumar

Bootstrap 4には複数の水平方向のセンタリング方法があります ...

  • 中央のtext-center要素にはdisplay:inline
  • offset-*またはmx-autoは、中央の列（col-*）に使用できます。
  • または、rowから中央の列のjustify-content-center（col-*）
  • mx-auto内のdisplay:block要素を中央揃えするためのd-flex

mx-auto（自動x軸マージン）は定義された幅を持つdisplay:blockまたはdisplay:flex要素を中央に配置します（％、vw、pxなど） Flexboxはグリッド列でデフォルトで使用されるので、さまざまなflexboxのセンタリング方法もあります。

Bootstrap 4のセンタリング方法のデモ

あなたのケースでは、mx-autoを中心に置くためにcol-3を使い、内容を中心に置くためにtext-centerを使います。

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

http://www.codeply.com/go/GRUfnxl3Ol

または、 flexbox要素でjustify-content-centerを使用する（.row）：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

また見なさい：
ブートストラップ4の垂直方向の中央揃え

121
Zim

列にclass text-centerを追加します。

<div class="col text-center">
I am centered
</div>
4
zhekaus
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

私は この答え のようにjustify-content-centerの代わりにmx-autoクラスを使っています。

https://jsfiddle.net/sarfarazk/4fsp4ywh/ で確認してください。

3
Sarfaraz Kasmani