Cách căn giữa ảnh trong HTML và CSS

Câu trả lời nhanh: text-align trên phần tử cha

Thẻ <img> là phần tử inline: nó nằm trong dòng chữ giống như một từ. Vì vậy bạn căn giữa nó theo đúng cách căn giữa chữ, với text-align: center trên phần tử cha:

<!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>

Style đặt trên div, không đặt trên ảnh. Đặt text-align: center trên chính <img> không có tác dụng gì, vì bên trong ảnh không có chữ nào để căn.

Cách 2: display block và margin auto

Nếu bạn muốn đặt style cho chính ảnh, hãy biến nó thành khối và cho nó margin hai bên tự động. Khoảng trống ở hai bên được chia đều:

<!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>

Ảnh màu xám có margin: 0 auto nhưng vẫn nằm ở đầu dòng: margin tự động không có tác dụng với phần tử inline. display: block chính là mảnh ghép còn thiếu. max-width: 100% cùng height: auto giữ cho ảnh không tràn ra ngoài màn hình hẹp mà vẫn giữ đúng tỉ lệ.

Cách 3: flexbox hoặc grid, kể cả căn giữa theo chiều dọc

Để căn giữa ảnh theo cả hai hướng bên trong một hộp, đặt chiều cao cho hộp và căn giữa nội dung của nó bằng grid hoặc 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>

Cách viết tương đương bằng flexbox là display: flex; justify-content: center; align-items: center;. Dù dùng cách nào, hộp cũng cần chiều cao lớn hơn ảnh, nếu không sẽ không có khoảng trống để căn giữa. Các cách này căn giữa được mọi phần tử; trang căn giữa div so sánh tất cả các cách đó.

Căn giữa ảnh có chú thích

Một bức ảnh có chú thích nên nằm trong <figure>. Căn giữa nội dung của figure, ảnh và chú thích sẽ thẳng hàng cùng nhau:

<!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>

Nhiều ảnh trên một hàng ở giữa

Một hàng logo hoặc ảnh thu nhỏ là việc của flexbox. justify-content: center căn giữa cả nhóm, gap tạo khoảng cách, và flex-wrap cho phép xuống dòng trên màn hình nhỏ mà vẫn giữ ở giữa:

<!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>

Nên dùng cách nào

Những cách cũ, và vì sao không nên dùng

Bạn vẫn sẽ gặp những cách này trong các bài hướng dẫn cũ:

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

<center> và thuộc tính align đã bị loại khỏi HTML. Trình duyệt vẫn hiển thị <center> để tương thích ngược, còn align="center" trên ảnh thậm chí không căn giữa theo chiều ngang: trình duyệt coi nó là căn chỉnh theo chiều dọc trong dòng. Hãy dùng một trong các cách CSS ở trên.

Lỗi thường gặp

• text-align: center trên <img>. Hãy đặt nó trên phần tử cha.
• margin: 0 auto trên ảnh inline. Thêm display: block.
• Căn giữa theo chiều dọc khi phần tử cha không có chiều cao. Hộp co lại vừa ảnh, không còn khoảng trống để căn giữa.
• float: center. Không có giá trị này. Float chỉ đẩy phần tử sang một bên.
• Quên alt. Ảnh đã căn giữa vẫn cần văn bản thay thế; chỉ dùng alt="" cho ảnh thuần trang trí.
• Ảnh bị kéo giãn. Đặt cả width và height trong CSS với tỉ lệ khác ảnh gốc sẽ làm méo ảnh. Chỉ đặt một giá trị và dùng height: auto, hoặc thêm object-fit: cover.