如何将多个图像居中答案

【问题标题】：How to center multiple images如何将多个图像居中
【发布时间】：2026-01-04 01:45:01
【问题描述】：

如何在一个 div 元素中将多个图像居中？

基本上，我需要将 4 张图片居中。其他一切似乎都很好。我查看了类似的问题并进行了尝试，但似乎没有任何效果 - 然而，其中一个问题使图像居中。问题是图像分散在整个页面上，而我需要图像之间只有几个像素的空间。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Assignment5.html</title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <h1>Visit These Famous Places</h1>
        <div>
            <img src="Images/Beijing-China.jpg" alt="Beijing" title="Beijing, China">
            <img src="Images/Grand-Canyon.jpg" alt="Grand Canyon" title="Grand Canyon, Pheonix, USA">
            <img src="Images/Sydney-Opera-House.jpg" alt="Sydney Opera Hourse" title="Sydney Opera House, Sydney, Australia">
            <img src="Images/Statue-Of-Liberty.jpg" alt="Statue of Liberty" title="Statue of Liberty, New York, USA">
        </div>
    </body>
</html>

CSS：

h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
}

img     {
            height: 100px;
            width: 150px;
            border: 3px solid black;
            border-radius: 20px;
            margin: 0px auto;
            display: block;
}

【问题讨论】：

标签： html css image centering

【解决方案1】：

img {
        margin: 0 auto;
}

h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
}

img     {
            height: 50px;
            width: 50px;
            border: 3px solid black;
            border-radius: 20px;
            margin: 0px auto;
            display: block;
            margin: 0 auto;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Assignment5.html</title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <h1>Visit These Famous Places</h1>
        <div>
            <img src="http://lorempixel.com/400/200" />
            <img src="http://lorempixel.com/400/200" />
            <img src="http://lorempixel.com/400/200" />
            <img src="http://lorempixel.com/400/200" />
        </div>
    </body>
</html>

【讨论】：

【解决方案2】：

你应该放

div{
  ...
  text-align: center;
  ...
}

【讨论】：

我相信只在 div 中居中文本，而不是任何图像
@SkyjumperTalon 如果图像显示为inline 或inline-block，它们将居中。

【解决方案3】：

您需要在div 元素上使用justify-content: center; 并给图像左右边距。 DEMO

h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
}

img     {
            height: 100px;
            width: 150px;
            border: 3px solid black;
            border-radius: 20px;
            margin: 0px 8px;
            display: block;
}

【讨论】：

【解决方案4】：

您应该只为您的 div 使用 text-align:center 它会将 div 中的所有项目对齐到中心而不仅仅是文本，并且还会从图像中删除 display:block 因为这将堆叠图像并删除 margin: 0 auto因为它不是必需的，所以它应该如下所示：

h1  {
            text-align: center;
            text-shadow: grey 2px 2px 10px;
}

div {
        text-align:center;
}

img     {
            height: 100px;
            width: 150px;
            border: 3px solid black;
            border-radius: 20px;
}

<h1>Visit These Famous Places</h1>
<div>
  <img src="https://placehold.it/150x100">
  <img src="https://placehold.it/150x100">
  <img src="https://placehold.it/150x100">
  <img src="https://placehold.it/150x100">
</div>

【讨论】：

【解决方案5】：

问题：img 上具有固定宽度的margin: 0 auto; 允许图像之间的空间随着浏览器的增长而增长。

这里的auto 设置img 相对于其父div 容器的水平边距，这样每个img 元素在其共享的div 容器内具有相等的水平边距。

您的父级div 图像容器没有固定宽度。因此，这个父容器的宽度会随着浏览器宽度的增加而增加。

图像之间的水平边距也会随着父容器的增长而增长。图像具有固定宽度，因此它们之间的空间必须增加以适应父容器的增加宽度。

如果您想看到这一点，请尝试调整 this demo 内的浏览器宽度。

解决方案：如果您删除margin: 0 auto; 并在div 标签上设置justify-content: center;，图像将居中。

对于图像之间的一些边距，您可以在img 标签上设置类似margin: 0 0.5rem; 的内容。您可以增加或减少0.5rem 以增加或减少图像之间的间距。

这是一个CodePen Demo，或者你可以运行下面的sn-p：

h1 {
  text-align: center;
  text-shadow: grey 2px 2px 10px;
}

div {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

img {
  height: 100px;
  width: 150px;
  border: 3px solid black;
  border-radius: 20px;
  display: block;
  margin: 0 0.5rem;
}

<h1>Visit These Famous Places</h1>
<div>
  <img src="Images/Beijing-China.jpg" alt="Beijing" title="Beijing, China">
  <img src="Images/Grand-Canyon.jpg" alt="Grand Canyon" title="Grand Canyon, Pheonix, USA">
  <img src="Images/Sydney-Opera-House.jpg" alt="Sydney Opera Hourse" title="Sydney Opera House, Sydney, Australia">
  <img src="Images/Statue-Of-Liberty.jpg" alt="Statue of Liberty" title="Statue of Liberty, New York, USA">
</div>

【讨论】：