css

【CSS】文字の中央

テキスト、画像はインライン要素になります。

今回はインライン要素の中央寄せについてまとめます。

テキスト

左右中央

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 ボックス については以下も参考にしてみて下さい。

最後に

特にありません。

© DeNnie.Lab All Rights Reserved.