CSS로 이미지 가운데 정렬하기
웹 페이지에서 이미지를 화면 중앙에 배치하고 싶을 때 CSS만으로 손쉽게 해결할 수 있습니다. 가장 널리 사용되는 방법은 display: block과 margin-left: auto, margin-right: auto 속성을 조합하는 것입니다.
이미지는 기본적으로 인라인(inline) 요소이기 때문에 마진 자동 정렬이 바로 적용되지 않습니다. 따라서 먼저 display: block으로 블록 요소로 변경한 뒤, 좌우 마진을 auto로 지정하면 이미지가 부모 요소 기준으로 수평 중앙에 위치하게 됩니다.
예제 코드
다음은 CSS로 이미지를 가운데 정렬하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Example of centering an image</h1>
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</body>
</html>코드 설명
- display: block — 이미지를 인라인 요소에서 블록 요소로 변경하여 마진 자동 정렬이 작동하도록 합니다.
- margin-left: auto / margin-right: auto — 좌우 여백을 균등하게 분배하여 이미지를 수평 중앙으로 밀어냅니다.
- width: 50% — 이미지 너비를 부모 요소의 50%로 설정해 중앙 정렬 효과를 더욱 명확하게 보여줍니다.
실행 결과
위 코드를 실행하면 다음과 같이 이미지가 화면 중앙에 정렬된 것을 확인할 수 있습니다.
