w3.css

테이블 중앙 정렬

CSS를 사용하여 표를 가운데 정렬하는 방법을 알아보자.

테이블 중앙 정렬 방법

1단계) HTML 추가

<table class="center">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

2단계) CSS 추가

표를 가운데 정렬하려면 왼쪽과 오른쪽 여백을 다음과 같이 auto 설정한다.

.center {
  margin-left: auto;
  margin-right: auto;
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기