이미지를 가운데 정렬하는 데 태그나 align="center"를 쓸 수 있나요?

없어요. 와 의 align 속성은 HTML5에서 폐기됐어요. 브라우저가 옛 페이지를 위해 를 여전히 렌더링하지만, 이미지의 align="center"는 가로가 아니라 줄 안에서 세로로 정렬해요. CSS를 쓰세요.

실행 가능한 CSS 문서: 이미지 가운데 정렬

Q: HTML에서 이미지는 어떻게 가운데 정렬하나요?

이미지를 담은 요소에 text-align: center를 주세요. 예를 들면 예요. 이미지는 기본이 인라인이라서 텍스트의 단어처럼 가운데 정렬돼요.

Q: margin auto로 이미지를 가운데 정렬하려면 어떻게 하나요?

먼저 이미지를 block으로 만드세요. img { display: block; margin: 0 auto; } auto margin은 인라인 요소를 가운데 정렬하지 못하고, 이미지는 바꾸기 전까지 인라인이에요.

Q: 이미지를 세로와 가로로 가운데 정렬하려면 어떻게 하나요?

컨테이너를 높이가 있는 grid(또는 flexbox)로 만드세요. .box { display: grid; place-items: center; height: 300px; } 그러면 이미지가 상자 한가운데 놓여요.

Q: 가운데 정렬한 이미지 아래에 작은 틈이 생기는 이유는 무엇인가요?

인라인 이미지는 텍스트 기준선 위에 놓여서, 아래로 내려가는 글자를 위한 공간이 남아요. 이미지에 display: block이나 vertical-align: middle을 주면 틈이 사라져요.

빠른 답: 부모에 text-align

<img>는 인라인 요소예요. 텍스트 줄 안에 단어처럼 놓여요. 그래서 텍스트를 가운데 정렬하는 방법, 즉 부모에 text-align: center를 주는 방법으로 가운데 정렬해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

스타일은 이미지가 아니라 div에 들어가요. <img> 자체에 text-align: center를 주면 아무 일도 일어나지 않아요. 이미지 안에는 정렬할 텍스트가 없기 때문이에요.

방법 2: display block과 margin auto

이미지 자체를 꾸미고 싶다면 block으로 바꾸고 자동 좌우 margin을 주세요. 양쪽의 빈 공간이 똑같이 나뉘어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

회색 이미지는 margin: 0 auto가 있지만 줄의 시작에 머물러요. auto margin은 인라인 요소에서 아무 일도 하지 않아요. 빠진 조각은 display: block이에요. max-width: 100%와 height: auto를 함께 쓰면 이미지가 비율을 유지하면서 좁은 화면을 넘치지 않아요.

방법 3: flexbox나 grid, 세로 가운데 정렬 포함

상자 안에서 이미지를 두 방향으로 가운데 정렬하려면 상자에 높이를 주고 grid나 flexbox로 콘텐츠를 가운데 정렬하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

flexbox로는 display: flex; justify-content: center; align-items: center;예요. 어느 쪽이든 상자가 이미지보다 높아야 해요. 그렇지 않으면 가운데 정렬할 공간이 없어요. 같은 방법으로 어떤 요소든 가운데 정렬할 수 있고, div 가운데 정렬 페이지에서 모두 비교해요.

캡션이 있는 이미지 가운데 정렬

캡션이 있는 사진은 <figure>에 들어가요. figure의 콘텐츠를 가운데 정렬하면 이미지와 캡션이 함께 맞춰져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

가운데 정렬된 이미지 여러 개

로고나 썸네일을 한 줄로 늘어놓는 건 flexbox의 일이에요. justify-content: center가 묶음을 가운데 정렬하고, gap이 간격을 주고, flex-wrap이 작은 화면에서 가운데 정렬을 유지한 채 줄바꿈되게 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

어떤 방법을 쓸까

상황	쓸 것
문단이나 간단한 블록 안의 이미지	부모에 `text-align: center`
이미지만 꾸밀 수 있을 때	`display: block; margin: 0 auto;`
상자 안에서 두 방향으로 가운데 정렬	상자에 grid `place-items: center`(또는 flexbox)
이미지 한 줄	`justify-content: center`를 준 flexbox
캡션이 있는 이미지	`text-align: center`를 준 `<figure>`
콘텐츠가 아닌 배경 그림	`background-position: center`, background-image를 보세요

옛 방법과 쓰지 않는 이유

옛 튜토리얼에서 아직 이런 코드를 볼 수 있어요.

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center>와 align 속성은 HTML에서 빠졌어요. 브라우저가 하위 호환을 위해 <center>를 여전히 렌더링하고, 이미지의 align="center"는 가로 가운데 정렬조차 하지 않아요. 브라우저는 이를 줄 안의 세로 정렬로 다뤄요. 위의 CSS 방법 중 하나를 쓰세요.

자주 하는 실수

<img>에 text-align: center. 부모에 주세요.
인라인 이미지에 margin: 0 auto. display: block을 추가하세요.
부모에 높이 없이 세로 가운데 정렬. 상자가 이미지 크기로 줄어들어서 가운데 정렬할 공간이 남지 않아요.
float: center. 그런 값은 없어요. float는 한쪽으로만 가요.
alt 빠뜨리기. 가운데 정렬한 이미지에도 대체 텍스트가 필요해요. alt=""는 순수한 장식 이미지에만 쓰세요.
늘어난 이미지. CSS에서 width와 height를 비율이 다른 값으로 모두 지정하면 찌그러져요. 하나만 지정하고 height: auto를 쓰거나 object-fit: cover를 추가하세요.

자주 묻는 질문

HTML에서 이미지는 어떻게 가운데 정렬하나요?

이미지를 담은 요소에 text-align: center를 주세요. 예를 들면 <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>예요. 이미지는 기본이 인라인이라서 텍스트의 단어처럼 가운데 정렬돼요.

margin auto로 이미지를 가운데 정렬하려면 어떻게 하나요?

먼저 이미지를 block으로 만드세요. img { display: block; margin: 0 auto; } auto margin은 인라인 요소를 가운데 정렬하지 못하고, 이미지는 바꾸기 전까지 인라인이에요.

이미지를 세로와 가로로 가운데 정렬하려면 어떻게 하나요?

컨테이너를 높이가 있는 grid(또는 flexbox)로 만드세요. .box { display: grid; place-items: center; height: 300px; } 그러면 이미지가 상자 한가운데 놓여요.

이미지를 가운데 정렬하는 데 <center> 태그나 align="center"를 쓸 수 있나요?

없어요. <center>와 <img>의 align 속성은 HTML5에서 폐기됐어요. 브라우저가 옛 페이지를 위해 <center>를 여전히 렌더링하지만, 이미지의 align="center"는 가로가 아니라 줄 안에서 세로로 정렬해요. CSS를 쓰세요.

가운데 정렬한 이미지 아래에 작은 틈이 생기는 이유는 무엇인가요?

인라인 이미지는 텍스트 기준선 위에 놓여서, 아래로 내려가는 글자를 위한 공간이 남아요. 이미지에 display: block이나 vertical-align: middle을 주면 틈이 사라져요.