스타일시트 (CSS) 로 이미지를 중앙 정렬하는 방법

HTML 에서 이미지를 중앙 정렬하는 방법을 알아보자.

1. 인라인 요소와 블록 레벨 요소

<img> 태그는 인라인 요소 (inline element) 이다. 인라인 요소는 블록 레벨 (block-level) 요소와 달라서 중앙 정렬할 수가 없다.

인라인 요소를 블록 레벨 요소처럼 다루기 위해 스타일시트를 이용한다.

2. 스타일시트로 이미지를 중앙 정렬하기

다음과 같은 <img> 태그를 중앙 정렬해 보자.

<img src=”tree.png”>

여기에 class 속성을 추가한다.

<img class=”center” src=”tree.png”>

스타일시트를 아래와 같이 작성한다.

.center {
  display: block;
  margin: auto;
}

display 속성의 block 속성값은 인라인 요소가 블록 레벨 요소처럼 취급되도록 한다.

margin 속성의 auto 속성값은 블록 레벨 요소의 여백이 자동으로 지정되도록 한다. 이런 경우에는 좌우 여백이 동일하게 지정되므로 블록 레벨 요소는 중앙 정렬된다.