Bootstrap4の列の中央にコンテンツを配置します

95

問題を解決するために助けが必要です。bootstrap4の列内のコンテンツを中央に配置する必要があります。以下のコードを見つけてください。

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

twitter-bootstrap flexbox bootstrap-4

— プラヴィーンクマール
ソース

2

使用できますclass="text-center"。

— Mihai Alexandru-Ionut 2017年

使用してみましたが、Bootstrap4では機能しません。テキストだけが中央に配置されますが、クラス「nauk-info-connections」自体のdivをcol-3div内で中央揃えにする必要があります。

— Praveen Kumar 2017

コンテナを中央に配置する従来の方法を使用しました。.nauk-info-connections{border-radius：50％; border：1px solid $ nauk-orange; 高さ：100px; 幅：100px; マージン：0自動; }

— Praveen Kumar 2017

206

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

text-center中心display:inline要素用
offset-*または列mx-autoを中央に配置するために使用できます（col-*）
あるいは、justify-content-center上rowに中心列（col-*）
mx-autodisplay:block内部の要素をセンタリングするためd-flex

mx-auto（自動X軸マージン）を中心に説明display:blockまたはdisplay:flex定義された幅を有する要素（％、VW、PX、等。）。Flexboxはグリッド列でデフォルトで使用されるため、さまざまなフレックスボックスのセンタリング方法もあります。

Bootstrap4のセンタリング方法のデモ

あなたのケースでは、使用mx-auto中心にcol-3してtext-center、それの内容を中心に...

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

https://codeply.com/go/GRUfnxl3Ol

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

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

参照：
Bootstrap4の垂直方向の中央揃え

— ジム
ソース

ありがとう。例やBootstrapのドキュメントに表示されていないのは、さまざまなブレークポイントでの非インライン要素の水平方向の中央揃えです。たとえば、a<select>をmd以上の中央に配置しますが、mdの下に左揃えにします。

— KayakinKoder

Bootstrap 4を使用している場合はselect、display：blockであるため、display：inlineではなくform-controldisplay：blockです。もちろん、元の質問はレスポンシブブレークポイントの使用に関するものではなかったため、回答では説明されていません。

— ジンバブエ

12

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

スニペットを展開

必要に応じて列の「flex」を有効にし、justify-content-centerを使用します

— Dhineshはい
ソース

これは私のために働いた唯一の解決策です。ふぅ！ありがとう;）

— Akhil

8

text-center列にクラスを追加します。

<div class="col text-center">
I am centered
</div>

— zhekaus
ソース

5

<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/で確認してください

— サルファラズ・カスマニ
ソース

2

これは、すでにに覆われているトップ投票の答え

— ジャン=フランソワ・コルベット

@Jean-FrançoisCorbettmx-autoの代わりにjustify-content-centerクラスを使用しました。これもその方法の1つです。人々はこれを使うことができます私はただ他の人を助けようとしています。ありがとう

— Sarfaraz Kasmani 2018年

ああ、そうだね。さて、少しの説明は大いに役立つ可能性があります。

— ジャン=フランソワ・コルベット

1

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

スニペットを展開

— Abdo-ホスト
ソース

1

2020年：同様の問題

コンテンツがページの中央に配置するボタンのセットである場合は、それらを1行に折り返し、justify-content-centerを使用します。

以下のサンプルコード：

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>

— マルコゼン
ソース