text-align:center が効かない？原因は display:inline-block でした
今回はホームページ制作のコーディング中に
見出しを中央揃えにしたいのにうまくいかないという場面がありました。
見出しのCSSは元々このようになっていました。
.title {
font-size:28px;
margin-bottom:20px;
position: relative;
display:inline-block;
}
この display:inline-block は、
見出しの下線を 擬似要素（::after）で作るために設定していました。
例えばこのようなコードです。
.title::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:100%;
height:2px;
background:#333;
}
ここで width:100% を指定すると、
見出しの幅いっぱいに下線が表示されます。
text-align:center を指定してみた
見出しを中央にしたくて、次のCSSを書きました。
.title-center{
text-align:center;
}
しかし、見た目が変わりませんでした。
原因：inline-block は要素の幅が文字サイズになる
display:inline-block の場合、
要素の幅 = 文字の幅
になります。
イメージするとこうです。
[事業概要]
この状態では要素の幅が文字と同じなので、
text-align:center を指定しても 中央に動く余白がありません。
display:block に変更すると中央揃えになる
そこで次のように変更しました。
.title-center{
display:block;
text-align:center;
}
display:block にすると
要素の幅 = 横いっぱい
になります。
[ 事業概要 ]
この状態になると、
text-align:center が効いて 文字が中央に配置されました。
ただし、今度は下線がずれる問題が発生
display:block にすると、
擬似要素の width:100% が 画面幅いっぱいになってしまいます。
つまり
下線が文字と合わなくなってしまうという問題が起きました。
CSSで中央揃えをするときのポイント
今回のケースで学んだのは次の点です。
display:inline-block
・要素の幅 = 文字の幅
・擬似要素の下線を作るときに便利
display:block
・要素の幅 = 横いっぱい
・text-align:center が効く
CSSでは
文字の配置
要素の配置
が別の仕組みになっているため、
親要素と子要素の関係を理解することが大切だと改めて感じました。
長くなってしまいました、、ここまでみてくださってありがとうございます
m(_ _)m （スクショしておけばもっと分かりやすかったなと反省）
