vertical-align(수직 정렬) - Part2

1.inline/inline-block 요소 간의 수직 정렬 (이전 글)
2.테이블 셀 요소 내부의 수직 정렬 (다음 글)

• 기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.

2.테이블 셀 요소 내부의 수직 정렬

vertical-align 속성을 사용하지 않은 default 값인 middle인 상태

제일 왼쪽 셀에 글자가 많아지면서 자연스럽게 셀의 길이가 늘어난 상태가 되고

다른 셀의 글자가 자동으로 가운데로 들어가 있음

// 전체 소스 코드는 길어서 제일 아래에 첨부
<td class="selected">
  <p>자차카타</p>
</td>

---

vertical-align: top; 을 하게되면, 셀 안의 글자가 위로 정렬

<td class="selected" style="vertical-align: top;">
  <p>자차카타</p>
</td>

---

vertical-align: bottom; 을 하게되면, 셀 안의 글자가 아래로 정렬

<td class="selected" style="vertical-align: bottom;">
  <p>자차카타</p>
</td>

---

• 참고로 table에서는 top, middle, bottom 속성만 사용 할 수 있음
• 아래는 table 전체 예제 코드 (head 태그, body 태그 생략)

<style>
  table {border-collapse: collapse;}
  th,td {border: 1px solid black;}
  .selected {background-color: lightblue;}
</style>
<table>
  <tr>
    <th>
      <p>가나다라</p>
      <p>마바사아</p>
      <p>자차카타</p>
    </th>
    <td class="selected" style="vertical-align: middle;">
      <p>자차카타</p>
    </td>
    <td>abcd</td>
  </tr>
  <tr>
    <th>efgh</th>
    <td>ijkl</td>
    <td>mnop</td>
  </tr>
</table>

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/vertical-align-Part2-a8f720dde20c43d3a20415890880ae60?pvs=4

vertical-align(수직 정렬) - Part2 | Notion