こんにちは、さち です。
サイトを作っているとブチ当たるのが、テキストや画像などの要素を「上下左右(縦横)」の中央に配置するには HTML・CSS をどう書けばいいのか問題。
左右中央は text-align: center;
でだいたい間に合うんですが、上下中央にはそのような万能な CSS プロパティがありません……。
解決方法は複数あって、それぞれに長所・短所(メリット・デメリット)があります。どの方法を使うかは状況次第です。
そこで今回は、要素を「上下左右」の中央に配置する方法についてまとめていきます。(備忘録です)
【方法1】 「line-height」を使う方法
サンプルコード
<div class="parent"> テキスト </div> <div class="parent"> <img src="sample.png"> </div>
.parent { height: 150px; line-height: 150px; text-align: center; }
height
と line-height
を同じ値にすることで上下中央に配置します。
結果
「テキスト」は上手くいきますが、「画像」は上にズレてしまいます。
また、line-height
の値が大きいため、「テキスト」の場合でも2行以上になると崩れます。(行間が広すぎる)
- 簡単な CSS しか使わない
- 記述量が少ない
- 「画像」だとズレる
- 「テキスト」も2行以上だと崩れる
【方法2】 「position」を使う方法
サンプルコード
<div class="parent"> <span class="child">テキスト</span> </div> <div class="parent"> <img class="child" src="sample.png"> </div>
.parent { position: relative; } .child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
子要素の top
left
right
bottom
の値を 0
にして、さらに margin: auto;
にすることで、上下左右を中央に配置します。
結果
「画像」は上手くいきますが、「テキスト」には効果がありません。
- 簡単な CSS しか使わない
- 「テキスト」には効果がない
【方法3】 「transform」を使う方法
サンプルコード
<div class="parent"> <span class="child">テキスト</span> </div> <div class="parent"> <img class="child" src="sample.png"> </div>
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
子要素の top
left
を 50%
にすることで、親要素の中心に子要素の左上角が移動します。
さらに、transform: translate(-50%, -50%);
で子要素の位置を自分の大きさの半分だけ戻すことで、上下左右の中央に配置します。
結果
「テキスト」「画像」どちらも上手くいきます。
- 「テキスト」「画像」どちらでもOK
- やっていることが回りくどい
- 「テキスト」は要素で囲む必要がある
transform
translate
の使い方が覚えづらい
【方法4】 「flex」を使う方法
サンプルコード
<div class="parent"> テキスト </div> <div class="parent"> <img src="sample.png"> </div>
.parent { display: flex; align-items: center; justify-content: center; }
display: flex;
にすることで使用できる align-items
で上下中央に、justify-content
で左右中央に配置します。
結果
「テキスト」「画像」どちらも上手くいきます。
- 「テキスト」「画像」どちらでもOK
- 記述量が少ない
align-items
とjustify-content
が覚えづらいdisplay: grid;
を使う方法と混同しやすい
【方法5】 「grid」を使う方法
サンプルコード
<div class="parent"> テキスト </div> <div class="parent"> <img src="sample.png"> </div>
.parent { display: grid; place-items: center; }
display: grid;
にすることで使用できる place-items
で上下左右の中央に配置します。
結果
「テキスト」「画像」どちらも上手くいきます。
- 「テキスト」「画像」どちらでもOK
- 記述量が少ない
place-items
が覚えづらいdisplay: flex;
を使う方法と混同しやすい
【方法6】 「table-cell」を使う方法
サンプルコード
<div class="parent"> <span class="child">テキスト</span> </div> <div class="parent"> <span class="child"><img src="sample.png"></span> </div>
.parent { display: table; } .child { display: table-cell; vertical-align: middle; text-align: center; }
<table>
タグの中では vertical-align: middle;
を使って上下中央に配置できます。
<table>
以外のタグでも、親要素に display: table;
、子要素に display: table-cell;
を設定することで vertical-align: middle;
が使えるようになります。
結果
「テキスト」「画像」どちらも上手くいきます。
- 「テキスト」「画像」どちらでもOK
- 親要素が
display: table;
でないといけない - 「テキスト」も「画像」も要素で囲む必要がある
「flex」「grid」を使う方法の注意点
改行位置を指定したいときに、CSS の word-break: keep-all;
overflow-wrap: break-word;
と HTML の <wbr>
を使う方法があります。
しかし、この方法は display: flex;
と display: grid;
の要素では上手く動きません。
つまり、前述の「flex」「grid」を使う方法とは併用できません。注意して下さい。
コメント