정렬 (align)

세로 정렬

baseline top middle bottom text-top text-bottom
<span class="align-vertical-baseline">baseline</span>
<span class="align-vertical-top">top</span>
<span class="align-vertical-middle">middle</span>
<span class="align-vertical-bottom">bottom</span>
<span class="align-vertical-text-top">text-top</span>
<span class="align-vertical-text-bottom">text-bottom</span>

부모 높이 기준에 의한 정렬

baseline top middle bottom text-top text-bottom
<table style="height: 100px;">
  <tbody>
	<tr>
	  <td class="align-vertical-baseline">baseline</td>
	  <td class="align-vertical-top">top</td>
	  <td class="align-vertical-middle">middle</td>
	  <td class="align-vertical-bottom">bottom</td>
	  <td class="align-vertical-text-top">text-top</td>
	  <td class="align-vertical-text-bottom">text-bottom</td>
	</tr>
  </tbody>
</table>

문자 가로 정렬

text-center

text-left

text-right

text-justify

<p class="text-center">text-center</p>
<p class="text-left">text-left</p>
<p class="text-right">text-right</p>
<p class="text-justify">text-justify</p>