CSS 이미지 가운데 정렬 하는 2가지 방법

이미지뿐만 아니라 모든 태그는 기본적으로 왼쪽 정렬이 되어있습니다. 가운데 정렬을 하기 위해서는 웹 표준인 text-align:center을 쓰는 것이 일반적이지만 상황에 따라 다르게 표현해야 할 때도 있습니다. 그 방법에 대해 알아보겠습니다.

이미지 가운데 정렬하는 방법

text-align:

div {
  display : block ;
  text-align : center ;
}
img {
  display : inline;
}

text-align은 left, center, right, justify 속성 값을 가지고 있습니다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있습니다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻입니다.

display:

img {
display : block ;
margin : 0 auto ;
}

img 태그는 기본적으로 inline-block 속성입니다. 이 속성은 너비와 높이를 지정할 수 있고 줄 바꿈이 이루어지지 않습니다. 만약, 너비와 높이를 지정하지 않는다면 img 만큼만 영역이 잡힙니다.

이때 block 요소를 사용한다면 한 영역을 차지하는 박스형태의 성질을 가지고 있기 때문에 가운데 정렬이 가능해집니다. 왜냐하면 width값이 100%가 되기 때문입니다.