Bootstrap4で上下左右を中央寄せにする方法
自分でもしょっちゅう忘れてしまうのでメモしておきます
結論から言うとこれを使います
<div class="d-flex align-items-center justify-content-center">
上下左右を中央寄せにしてー
</div>
それぞれの意味は、
d-flex → 要素をフレックスコンテナ化します
これを指定しないと以下の要素が有効になりません
align-items-center → 上下中央寄せ
justify-content-center → 左右中央寄せ
ちなみに左右中央には「text-center」って言う良く使う指定方法がありますが、d-flexを指定すると「text-center」が使えなくなります
だから代わりにjustify-content-centerを使うってわけです
ちなみに、justify-content-centerは指定しなくてもPCでは中央に寄ってる様に見える事があります
でもスマホ画面で見ると中央に寄ってないので忘れずに指定しましょう
ディスカッション
コメント一覧
まだ、コメントがありません
みんながLoadingしてる記事
新たにPostされた記事
: JS
Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです Dropzone.jsを使って画像アップロードの編集画面を作 ...: Laravel
LaravelでDBテーブルをupdateした時に、同時に更新した値を取得する裏技[Laravel8]
通常Eloquentのsaveやupdateでは、実行時に更新した値の結果を返し ...: JS
忘れがちなJqueryのあれやこれ
Jqueryって何でこんなに忘れやすいのでしょうか 呪文にかかったくらい覚えられ ...: 資格
理系エンジニアの僕がTOEICで800点をとるためにした勉強
先日、TOEIC L&R テストで800点を超えました 今回は理系エンジ ...: Laravel
[Laravel8]npm run devが失敗する場合の解決法
Laravel8にJetstreamをインストールする際、npm run dev ...HashMap
Created by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
そのほか