Td checkbox 가운데 정렬 - Td checkbox gaunde jeonglyeol

표와 관련된 정렬

표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은

목차 Show

표와 관련된 정렬
셀 안의 내용 가로 정렬
셀 안의 내용 세로 정렬
체크박스와 라벨

표 : 왼쪽 정렬
제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬
내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬
셀 안의 내용 세로 정렬 : 가운데 정렬

입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 400px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Lorem</th>
          <th>Ipsum</th>
          <th>Dolor</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

표 정렬

표를 가운데 정렬할 때는 margin 속성을 사용합니다. 좌우 margin 속성값을 auto로 정합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

표를 오른쪽 정렬할 때는 float 속성을 사용합니다. 속성값을 right로 정합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
    float: right;
  }
</style>

셀 안의 내용 가로 정렬

셀 안의 내용 가로 정렬은 text-align 속성을 사용합니다. 왼쪽 정렬은 left, 가운데 정렬은 center, 오른쪽 정렬은 right가 속성값입니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
  }
  th {
    text-align: left;
  }
  td {
    text-align: right;
  }
</style>

셀 안의 내용 세로 정렬

셀 안의 내용 세로 정렬은 vertical-align 속성을 사용합니다. 위쪽 정렬은 top, 가운데 정렬은 middle, 아래쪽 정렬은 bottom이 속성값입니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
  }
  th {
    vertical-align: top;
  }
  td {
    vertical-align: bottom;
  }
</style>

체크박스와 라벨

체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.

예제

다음은 높이를 조정하는 간단한 예제입니다.

첫 번째 체크박스와 라벨은 아무런 조정을 하지 않은 것입니다. 체크박스가 라벨보다 조금 위에 있습니다.
두 번째 체크박스와 라벨은 체크박스를 1.5px 밑으로 내려서 높이를 맞추었습니다.
세 번째 체크박스와 라벨은 라벨을 1.5px 위로 올려서 높이를 맞추었습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      input[id="b"] {
        position: relative;
        top: 1.5px;
      }
      label[for="c"] {
        position: relative;
        top: -1.5px;
      }
    </style>
  </head>
  <body>
    <p><input type="checkbox" id="a"> <label for="a">LOREM</label></p>
    <p><input type="checkbox" id="b"> <label for="b">LOREM</label></p>
    <p><input type="checkbox" id="c"> <label for="c">LOREM</label></p>
  </body>
</html>