【CSS Modules】text-alignプロパティの使い方

text-alignプロパティは、ブロック要素内のインラインコンテンツ（テキスト、画像、インラインブロック要素など）を、そのブロック要素の幅の中で水平方向にどのように配置するかを制御するプロパティです。これは、ウェブページ上のテキストや画像の表示位置を調整する際に不可欠な機能です。

具体的には、left を指定するとコンテンツを左端に、right を指定すると右端に、center を指定すると中央に配置します。justify を指定すると、テキスト行の両端を揃えるように単語間のスペースを自動的に調整し、均等なレイアウトを実現します。

書字方向（文字が書かれる方向）に依存する値として、start と end があります。start は書字方向の開始位置に、end は終了位置にコンテンツを配置し、国際化対応のレイアウトに役立ちます。match-parent は、親要素の text-align の計算済みの値に基づいて配置します。

このプロパティは、親となるブロックレベル要素に設定され、その内部にあるインラインコンテンツに影響を与えます。重要な注意点として、text-align プロパティは、適用されたブロック要素そのものの水平方向の位置を制御するものではありません。ブロック要素自体を中央に配置したい場合などには、margin: auto といった別のプロパティを使用する必要があります。このプロパティは親要素から子要素へ継承されるため、一度設定するとその子孫要素のコンテンツにも影響を与えます。

Copy
1p {
2  text-align: center;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません