文字を中央揃えにするCSSプロパティ「text-align」
Webページの制作において、文字の配置は視認性やデザイン性に大きく影響します。例えば、見出しやボタン内の文字を中央揃えにすることで、洗練された印象を与えることができます。この記事では、CSSを用いて文字を中央揃えにする方法について解説します。
文字揃え位置の変更は「text-align」
CSSで文字の揃え位置を指定するには、「text-align」プロパティを使用します。このプロパティには、以下の様な値を設定することができます。
| 値 | 説明 |
|---|---|
left |
左揃え (初期値) |
center |
中央揃え |
right |
右揃え |
justify |
両端揃え |
中央揃えにする場合は、「text-align: center;」と指定します。実に直感的で分かりやすいですね！
使用例
以下のHTMLコードは、見出し(h2)と段落(p)の文字をそれぞれ中央揃えにする例です。
<h2 style="text-align: center;">中央揃えの見出し</h2>
<p style="text-align: center;">中央揃えの段落です。</p>
上記コードをWebページに埋め込むと、以下のように表示されます。
中央揃えの見出し
中央揃えの段落です。
参考資料
よくある質問
Q1. text-align: center; を指定しても中央揃えになりません。
A1. 親要素にも text-align の設定がないか確認してください。親要素の text-align の設定が優先される場合があります。 また、要素の幅が指定されていない場合、中央揃えにならない場合があります。幅を指定するか、display: inline-block;などを設定してみてください。
Q2. 特定のブラウザでだけ中央揃えになりません。
A2. ブラウザによってCSSの解釈が異なる場合があります。ベンダープレフィックスを使用したり、最新版のブラウザを利用するなどして対応してください。
Q3. 縦方向にも中央揃えにするには？
A3. text-align は水平方向の揃えのみを変更します。 縦方向の中央揃えには、 flexbox や display: table-cell; と vertical-align: middle; の組み合わせなどを利用します。
その他の参考記事:css li 横並び 均等