タイポグラフィ（レイアウト）
text-align
文書の水平割り付けを設定する
| value | description |
|---|---|
start/left (default) | 左寄せ （日本語環境の場合） |
end/right | 右寄せ （日本語環境の場合） |
center | 中央寄せ |
justify | 左右均等割付け |
Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud...
</p>
.text {
text-align: start;
padding: 8px 16px;
margin: 0 auto;
max-width: 400px;
border: 1px solid rgba(255, 255, 255, 20%);
border-radius: 4px;
background: rgba(255, 255, 255, 5%);
}
概要
文書を揃える方向を指定します。start/leftが指定された場合は左寄せ、end/rightが指定された場合は右寄せ、centerが指定された場合は中央寄せ、justifyが指定された場合は横いっぱいになるように文字間隔が広がります。
start/left、end/rightの違い
アラビア語のような右から左に記述する言語を利用する場合、startは右寄せになります。一方leftは言語によらず左寄せになります。end/rightも同様です。
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud...
</p>
.text {
text-align: end;
background: rgba(255, 255, 255, 5%);
border: 1px solid rgba(255, 255, 255, 20%);
padding: 4px;
border-radius: 4px;
position: relative;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud...
</p>
.text {
text-align: center;
background: rgba(255, 255, 255, 5%);
border: 1px solid rgba(255, 255, 255, 20%);
padding: 4px;
border-radius: 4px;
position: relative;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud...
</p>
.text {
text-align: justify;
background: rgba(255, 255, 255, 5%);
border: 1px solid rgba(255, 255, 255, 20%);
padding: 4px;
border-radius: 4px;
position: relative;
}