web-dev-qa-db-ja.com

カードをbootstrap 4にセンタリングする方法は?

bootstrap 4 alpha 3を使用しています。
ページの中央でカードを水平方向に中央揃えします。

Preview / link:http://codepen.io/vaibhavsingh97/full/VjRAXW

カードのbootstrap 4サンプルページにリストされているさまざまなオプションをすべて試しました。

どうすればこれを達成できますか?

31
Vaibhav Singh

.cardのCSSを追加します

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

ペン

UPDATE:bootstrap 4で使用可能なクラス.mx-autoを使用して、カードをセンタリングできます。

49
Shahil M

2018年に更新

余分なCSSは必要ありません。また、Bootstrap 4には複数のセンタリングメソッドがあります。

  • text-centerセンター用display:inline要素
  • mx-autodisplay:block要素をdisplay:flex(d-flex)内の中央に配置するため
  • offset-*またはmx-autoを使用してグリッド列を中央に配置できます
  • またはjustify-content-center on row on grid grid columns

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

あなたの場合、あなたは単にmx-autocardsにできます。

59
Zim