HTML과 CSS를 사용해 웹 사이트를 만들다보면 이미지를 자주 다루게 됩니다.

개발자들은 종종 CSS를 사용해 이미지를 정렬하게 되는데, 특히 중앙 정렬을 하려고 할 때 어려움을 겪곤 합니다. 특히 초심자에게는 CSS에서 무엇이든 중앙 정렬을 하는 것이 쉽지 않은 일입니다. 그렇기 때문에 div 를 중앙 정렬할 수 있다고 뽐내는 사람들도 있는 것입니다. :)

img 요소는 인라인 요소이기 때문에 중앙 정렬이 조금 더 어렵습니다. 하지만 걱정하지 마세요. 이미지를 블록 레벨 요소로 변환하여 중앙 정렬을 할 수 있습니다.

이 글에서는 이미지를 중앙 정렬하는 4가지 방법을 살펴보겠습니다.

목차

• text-align 속성을 사용한 이미지 중앙 정렬

• Flexbox를 사용한 이미지 중앙 정렬

• CSS Grid를 사용한 이미지 중앙 정렬

• margin 속성을 사용한 이미지 중앙 정렬

text-align 속성을 사용한 이미지 중앙 정렬

text-align 속성을 사용해 이미지를 중앙 정렬할 수 있습니다.

한 가지 알아두어야 할 것은, 이미지를 가져오기 위한 img태그는 인라인 요소라는 것입니다. text-align속성을 통한 중앙 정렬은 블록 레벨 요소에 대해서만 가능합니다.

그렇다면 어떻게 text-align 속성을 사용해 이미지를 중앙 정렬할 수 있을까요? 이미지를 div와 같은 블록 레벨 요소로 감싼 후, 이미지를 감싼 div의 text-align속성에 center값을 설정합니다. 이렇게 하면 이미지가 중앙에 정렬됩니다.

<div>
  <img src="fcc22.png" alt="freeCodeCamp" />
</div>

div {
  text-align: center;
}

Flexbox를 사용한 이미지 중앙 정렬

CSS Flexbox의 도입으로 무엇이든 중앙 정렬하기가 쉬워졌습니다.

Flexbox로 이미지를 중앙 정렬하려면, 중앙 정렬하고 싶은 요소를 컨테이너 요소로 감싼 후 컨테이너 요소의 display 속성값을 flex로 지정합니다. 그리고 컨테이너의 justify-content 속성값을 다음 코드 스니펫과 같이 center로 지정합니다.

div {
  display: flex;
  justify-content: center;
}

P.S.: justify-content 속성을 center 로 지정하면 이미지를 수평으로만 중앙 정렬하게 됩니다. 이미지를 수직으로도 중앙 정렬하기 위해서는 align-items 속성 또한 center 로 지정해야 합니다.

CSS Grid를 사용한 이미지 중앙 정렬

CSS Grid는 Flexbox와 유사한 방식으로 작동하지만, Grid는 2차원인 Flexbox와 달리 다차원이라는 추가적인 이점이 있습니다.

CSS Grid로 이미지를 중앙 정렬하려면, 중앙 정렬하고 싶은 이미지를 감싸는 컨테이너 div 요소를 생성한 후, 컨테이너 div 요소의 display 속성값을 grid로 설정합니다. 그리고 컨테이너 div요소의place-items속성값을 center로 지정하면 이미지가 중앙 정렬됩니다.

div {
  display: grid;
  place-items: center;
}

P.S.: place-items 속성을 center 로 지정하면 무엇이든 수평 및 수직으로 중앙 정렬하게 됩니다.

margin 속성을 사용한 이미지 중앙 정렬

이미지의 왼쪽과 오른쪽의 margin을 auto로 설정함으로써 이미지를 중앙 정렬할 수 있습니다. 그러나 text-align 속성과 마찬가지로 margin 속성은 블록 레벨 요소에만 적용됩니다. 따라서 이미지의 display 속성값을 block으로 지정해서 이미지를 블록 레벨 요소로 변환해야 합니다.

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

display와 margin 이 두 가지 속성을 변경하는 것만으로도 이미지를 중앙 정렬하는 데 충분할 수 있습니다. 그러나 경우에 따라서는 이미지의 왼쪽 오른쪽 margin을 auto로 지정했을 때 왼쪽, 오른쪽에 여백을 주기 위해 이미지의 width를 지정해야 할 수 있습니다.

img {
  display: block;
  margin: 0 auto;
  width: 40%;
}

P.S.: 이미지의 width를 반드시 40%까지 낮출 필요는 없을 수 있습니다. 이 이미지의 경우 width가 60% 이상일 때 왜곡되기 때문에, 예시에서 이미지 width를 40%까지 낮춘 것입니다.

이 글이 이미지를 중앙 정렬하는 데 가장 적합한 방법을 선택하는 데 도움이 됐기를 바랍니다. 읽어주셔서 감사합니다.