web-dev-qa-db-ja.com

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

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

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

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

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

htmlcssbootstrap-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-autoをcardsにできます。

59
Zim