(例)【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
親要素の配置を継承する