テキスト、画像はインライン要素になります。
今回はインライン要素の中央寄せについてまとめます。
テキスト
左右中央
text-align プロパティに center を指定します。
上下中央にはなりませんが左右中央になります。
HTML
<p class="sample"><span>あいうえお</span></p>CSS
.sample {
text-align: center;
width: 100%;
height: 100px;
outline: 1px solid blue;
}結果
あいうえお
上下中央
line-heightの利用
HTML
<p class="sample"><span>あいうえお</span></p>CSS
.sample {
text-align: center;
width: 100%;
height: 100px;
outline: 1px solid blue;
}
.sample span {
line-height: 100px;
}結果
あいうえお
line-height については以下も参考にしてみて下さい。
参考
デメリット
依存
親要素の高さに合わせる必要あるので、親要素の高さが変更された場合、同じように修正する必要があります。
複数行に不向き
文字が1行の場合は手軽に設定出来ますが、複数行になると破綻します。
親要素の高さとline-heightの高さを同じにしているので、複数行になると行間(line-height)が親要素の高さを超えるので破綻します。
HTML
<p class="sample"><span>あいうえおかきくけこさしすせそ</span></p>CSS
.sample {
text-align: center;
width: 10%; /* 100% から 10% へ修正 */
height: 100px;
outline: 1px solid blue;
}
.sample span {
line-height: 100px;
}結果
あいうえおかきくけこさしすせそ
flexボックスの利用
これを使用すれば概ね問題ないです。
HTML
<p class="sample"><span>あいうえおかきくけこさしすせそ</span></p>CSS
.sample {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 10%;
height: 100px;
outline: 1px solid blue;
}
結果
あいうえおかきくけこさしすせそ
flex ボックス については以下も参考にしてみて下さい。
最後に
特にありません。