【CSS】文字を中央寄せ,右寄せ,左寄せするtext-alignの使い方

「文字を中央寄せするにはどうするの？」

文字を中央寄せ,右寄せ,左寄せするtext-alignの使い方を解説します。

text-alignで位置調整

文字を囲っている要素、つまり親要素にtext-alignを指定すると文字の位置を調整できます。

【中央寄せ】text-align:center

<style>
.example{
    /*コレ*/text-align: center;
    border: 1px solid #333;
}
</style>
<div class="example">【中央寄せ】text-align:center</div>

【右寄せ】text-align:right

<style>
.example2{
    /*コレ*/text-align: right;
    border: 1px solid #333;
}
</style>
<div class="example2">【右寄せ】text-align:right</div>

【左寄せ】text-align:left

<style>
.example3{
    /*コレ*/text-align: left;
    border: 1px solid #333;
}
</style>
<div class="example3">【左寄せ】text-align:left</div>

【注意点1】ブロック要素とtableには効かない

text-alignは文字・span・a・imgなどのインライン要素とinline-blockを位置調整することができます。

一方でdivやpといったブロック要素とtableは位置調整できません。

<style>
.example4{
    /*コレ*/text-align: center;
    border: 1px solid #333;
    padding: 5px;
    background: #ddedfa;
}
.example4>div{
    width: 100px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example4">
    <div>div</div>
</div>

インライン要素とブロック要素について詳しくはこちら↓

ブロック要素とtableを中央寄せするには自身に「margin:auto」、

右寄せするには「margin-left:auto」を指定しましょう。

【注意点2】子孫要素に引き継ぐ

text-alignで指定した値は子孫要素に引き継ぎます。

下記はtext-align: centerを指定した要素の中にdivを置いた例です。

divそのものは先述したように中央寄せしませんが、その中にあるテキストは中央寄せになります。

<style>
.example5{
    /*コレ*/text-align: center;
    border: 1px solid #333;
    padding: 5px;
    background: #ddedfa;
}
.example5>div{
    width: 200px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example5">
    テキスト
    <div>div</div>
</div>

子孫要素を左寄せにしたい場合はその要素に改めてtext-align:leftを指定しましょう。

<style>
.example6{
    text-align: center;
    border: 1px solid #333;
    padding: 5px;
    background: #ddedfa;
}
.example6>div{
    /*コレ*/text-align: left;
    width: 200px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example6">
    テキスト
    <div>div</div>
</div>

【まとめ】text-alignの使い方

• 【中央寄せ】text-align:center
• 【右寄せ】text-align:right
• 【左寄せ】text-align:left

【注意点1】ブロック要素とtableには効かない

→これらを中央寄せするには自身に「margin:auto」、右寄せするには「margin-left:auto」を指定する。

【注意点2】子孫要素に引き継ぐ

→子孫要素を左寄せするには改めてtext-align:leftを指定する。

以上、text-alignの使い方でした。