カテゴリー
CSS text-align

【CSS】text-align:テキスト位置を指定する

(例)【CSS】text-alignの使用方法

See the Pen
text-align
by linlin (@linlin098765)
on CodePen.

<p class="sample" style="text-align:start;">
text-align:start; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:end;">
text-align:end; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:left;">
text-align:left; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:right;">
text-align:right; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:center;">
text-align:center; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:justify;">
text-align:justify; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:justify-all;">
text-align:justify-all; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:match-parent;">
text-align:match-parent; を指定<br>
There are three apples on the desk.
</p>
p.sample {
	width:100px;
	background-color:gray;
}

【CSS】text-align:テキスト位置を指定する

 CSSのtext-alignは、テキストを行の中でどの位置にするか指定するプロパティです。

  • start
    始端に揃える(初期値)
  • end
    終端に揃える
  • left
    左端に揃える
  • right
    右端に揃える
  • center
    中央に揃える
  • justify
    均等割り。始端から終端まで均等割りとなる
  • justify-all
    均等割り。最後の行まで均等割りとなる
  • match-parent
    親要素の配置を継承する