CSSで上下左右中央揃えする方法がいつもわからなくなるので整理しました。
参考にしたサイトはこちらです。
この中で自分がよく使うけれど、毎回忘れる方法だけを整理しました。
marginを使う方法などはあまり使わないので、今回は割愛しています。
気になる方は上記のサイトを参照ください。
わかりやすいのでブロック要素とインライン要素という言葉を使用していますが、
HTML5ではブロック要素とインライン要素という概念は廃止されています。
ただし、基本的な考え方は大きく変わらないので、読み進める上では問題ないです。
自分がよく使うのは以下の2つの方法。
入会申込
ログインdisplay: flexでjustify-content: centerとalign-items: centerを使うtext-align: centerとvertical-align: middleを使うただ、結論から書くと基本は前者で良い。
例）divタグの中のテキストを中央揃えにしたい
例）divタグの中のspanタグを上下左右中央揃えにしたい
親のブロック要素に「ブロック要素の中のテキストを中央揃え」と同じCSSプロパティをつける。
HTML
|
<div class=”outer”>
<span class=”inner”>span in div</span>
</div>
|
CSS
| .outer { width: 400px; height: 200px; display: flex; justify-content: center; align-items: center; } .inner { font-size: 24px; } |
HTML
|
<div class=”outer”>
<span class=”inner”>span in div</span>
</div>
|
CSS
| .outer { width: 400px; height: 200px; display: table-cell; vertical-align: middle; text-align:center; } .inner { font-size: 24px; background-color: aquamarine; } |
例）divタグの中のdivタグを上下左右中央揃えにしたい
親のブロック要素に「ブロック要素の中のテキストを中央揃え」と同じCSSプロパティをつける。
CSSは「ブロック要素の中のインライン要素を中央揃え」と全く一緒。
インライン要素はwidthやheightが指定できないものがある。
具体的にはspanタグなど。
そのような要素内のテキストには中央揃えという概念などがない。
逆にbuttonタグなどはwidthやheightが指定できるので、中央揃えという概念がある。
例）buttonタグの中のテキストを中央揃えにしたい
自分がよく使う2つの方法を説明した。
使い分けとしては以下のようになると思う。
display: flexでjustify-content: centerとalign-items: centerを使うtext-align: centerとvertical-align: middleを使うブロック要素にtext-align: centerとvertical-align: middleを使わないのは、
ブロック要素をテーブルセル要素に変えないといけないからである。
テーブルセル要素を連続で使用すると横に並んでしまい、テーブルの行のような形になる。
それで問題ない場合は良いが、問題になる場合も多い。
その点、display: flexはその辺りを柔軟にできるので、基本的にはdisplay: flexを使う。
ところでなぜ、display: table-cellを使うのか。
それは、vertical-align: middleがブロック要素で使えないからである。
mdmのvertical-alignの説明では以下のように記載されている。
vertical-alignは CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。
なお、mdmのtext-alignの説明では以下のように記載されている。
text-alignCSS プロパティは、ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。これはvertical-alignと同じように機能しますが、水平方向に機能することを意味します。
vertical-alignもtext-alignもどちらも内部のコンテンツの配置を指定するプロパティである。
ただし、text-alignの方はブロック要素に指定できるが、vertical-alignの方はブロック要素に指定できないのである。
そのため、text-alignとvertical-alignはインライン要素かテーブルセル要素に使う。
具体的にはbuttonタグとかで使うことが多い気がする。
また、テキストの横にアイコン画像をimgタグで配置するとき、アイコンの位置が微妙にずれていることがある。
そのような時にどうするかいつも迷うのだが、結局、構造的には、ブロック要素の中のインライン要素になるので、display: flexでalign-items: centerを使うのが良いと思う。
ただ、GoogleのMaterial Design Iconsを使う時は、以下のスタイルを適用した方が良さそう。（参考）
| .material-icons{ display: inline-flex; vertical-align: middle; } |
しかし、Nuxtでvue-material-design-iconsを使った時は、以下のようにdisplay: inline-flex;がない方が綺麗に揃ったので、絶対の正解はなさそう。
| .material-icons{ vertical-align: middle; } |
どうしようも無くなった場合は、以下のように無理やり調整することもできる。（参考）
| .material-icons{ vertical-align: -3px; } |
