テキストアライグプロパティを使用してテキストアライメントをどのように制御しますか？

テキストアライグプロパティを使用してテキストアライメントをどのように制御しますか？

CSSのtext-alignプロパティは、要素内のテキストのアラインメントを制御するために使用されます。このプロパティは、これらの要素内のテキストのアライメントを変更するために、 <div> 、 <code><p></p> 、 <h1></h1> 〜 <h6></h6>などのブロックレベルの要素に適用できます。 text-alignプロパティを使用するには、CSSルール内で指定し、利用可能な値の1つに設定します。たとえば、テキストを<p></p>要素内に中央に配置するには、次のCSSルールを使用できます。

 <code class="css">p { text-align: center; }</code>

このルールは、ページ上のすべての<p></p>要素のテキストを中心にします。上記のように、IDまたはクラスセレクターを使用して特定の要素に、または要素セレクターを使用して複数の要素にtext-alignプロパティを適用できます。

Text-Alignプロパティで使用できるさまざまな値は何ですか？

text-alignプロパティは、要素内のテキストがどのように整合されるかを決定するいくつかの値を受け入れます。最も一般的に使用される値は次のとおりです。

• 左：テキストを要素の左端に合わせます。これは、左から右に読み取るほとんどの言語のデフォルトのアライメントです。
• 右：テキストを要素の右端に合わせます。
• センター：要素内のテキストを中心にします。
• 正当化：テキストの行を伸ばして、要素内の左と右のエッジの両方を整列させます。これは、単語間の不均一な間隔につながる場合があります。

さらに、 text-alignプロパティは、以下の一般的な値を受け入れます。

• 開始：テキストを要素の開始エッジに合わせます。これは、左から右への言語ではleftに、右から左の言語にright並べられています。
• 終了：テキストを要素の端端に合わせます。これは、左から右の言語でrightに相当し、右から左の言語にleft 。

テキストアライグプロパティは、さまざまなHTML要素のテキストのレイアウトにどのように影響しますか？

text-alignプロパティは、要素のコンテンツボックスのエッジに対してテキスト行の水平位置を調整することにより、ブロックレベルのHTML要素内のテキストのレイアウトに影響します。例えば：

• text-align: leftを使用して<p></p>要素に適用すると、テキストは段落の左端に沿って整列し、右側が不均一になります。
• text-align: right使用されると、テキストは右端に沿って整列し、左側が不均一になる可能性があります。
• text-align: center要素内のテキストブロックの左側と右側の両方に等量のスペースがあるようにテキストを配置します。
• text-align: justifyが設定されると、ブラウザは単語間の間隔を調整しようとして、要素内の各行の行が伸びて要素の全幅を埋めるようにしようとします。

text-alignの影響は、適用されるブロックレベルの要素内のテキストおよびインライン要素に限定されています。ブロックレベルの要素自体やブロック内の絶対に配置された要素の位置には影響しません。

テキストアライグプロパティを使用して、水平方向と垂直方向の両方でテキストを調整できますか？

text-alignプロパティは、要素内のテキストの水平方向のアライメントを制御するように特別に設計されています。テキストの垂直アライメントに影響はありません。垂直アライメントには、他のCSSプロパティを使用する必要があります。

テキストの垂直方向のアライメントを実現するには、シングルラインテキスト要素にline-heightなどのプロパティ、またはフレックスコンテナを使用するときにalign-itemsやjustify-contentなどのFlexBoxプロパティを使用できます。たとえば、FlexBoxを使用して<div>の垂直に中央のテキストを使用するには、以下を使用できます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;div { display: flex; align-items: center; justify-content: center; height: 200px; /* Height must be set for vertical alignment to work */ }&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>結論として、 <code>text-alignテキストの水平レイアウトを管理するのに強力ですが、垂直アライメントには他のCSS技術が必要です。