웹 사이트 디자인에 테이블을 사용하는 것은 흥미로운 작업입니다. 기본적으로 테이블 정렬은 왼쪽을 향하지만 여유 CSS의 속성을 중앙에 정렬할 수 있습니다.

값을 설정하면 여백 왼쪽 그리고 여백 오른쪽 에게 자동 을 클릭하면 브라우저에 테이블이 중앙에 표시됩니다. 단축 속성을 사용할 수 있습니다. 여유 그리고 그것을로 설정 자동 테이블을 중앙에 맞추는 것보다 여백 왼쪽 그리고 여백 오른쪽 재산.

내 모니터 크기 어떻게 알아?

테이블을 중앙에 정렬하는 대신, 텍스트 정렬: 중앙; 속성은 테이블 내부의 텍스트와 같은 테이블 내용을 중앙에 배치합니다.

그림을 사용하여 이를 이해해 보겠습니다.

예

이 예에서는 텍스트 정렬: 중앙; 테이블 내부의 내용을 중앙에 배치하는 속성 여백 왼쪽: 자동; 그리고 여백 오른쪽: 자동; 테이블을 중앙에 배치합니다.

자바의 어떤 컬렉션

 table, th, td { border: 1px solid black; margin-left: auto; margin-right: auto; border-collapse: collapse; width: 500px; text-align: center; font-size: 20px; } <table class="table"> <tr> <th>First_Name</th> <th>Last_Name</th> <th>Subject</th> <th>Marks</th> </tr> <tr> <td>James</td><td>Gosling</td><td>Maths</td><td>92</td> </tr> <tr> <td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td> </tr> <tr> <td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td> </tr> </table> 

산출