HTML | テキストを中央揃え、右寄せ、左寄せにする

HTML テキスト,HTML

HTML | テキストを中央揃え、右寄せ、左寄せにする

HTMLのタグでstyle属性でtext-alignを指定してテキストを中央揃え、あるいは左寄せ、右寄せにする方法を紹介しています。

余談ですが、text-alignalign「整列」という意味で、text aligin は日本語にすると「テキストの整列」という事になります。

<center>タグや align="center" などは非推奨

過去、中央寄せに使われていた<center>タグは現状でも殆どのブラウザで機能していますが、HTML5より非推奨、廃止予定とされています。
また、右寄せのための<right>というタグや、左寄せのための<left>というタグは存在しません。

<div align="center">などで使われてきた align属性による指定は、テーブル要素での<th>、<tr>、<td>、<col>では有効とされていますが、<div><p>タグなどの要素に使う事はブラウザでは機能しますが、HTML5より非推奨となっています。

現在、HTMLタグ内でテキストを中央揃えまたは右寄せ、左寄せにするには、style属性を使う事が推奨されています。

テキストを中央揃え

style属性でtext-align:center を指定してテキストを中央揃えにするサンプルコードと表示結果です。

<p style="text-align:center">テキストを中央揃え</p>

テキストを中央揃え

テキストを右寄せ

style属性でtext-align:right を指定してテキストを右寄せにするサンプルコードと表示結果です。

<p style="text-align:right">テキストを右寄せ</p>

テキストを右寄せ

テキストを中央揃え

style属性でtext-align:left を指定してでテキストを左寄せにするサンプルコードと表示結果です。

<p style="text-align:left">テキストを左寄せ</p>

テキストを左寄せ