Question

如何在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;
}

Answer 1

你应该把

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

Answer 2

您需要在justify-content: center;元素上使用div并向左和向右提供图像边距。的 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; }

Answer 3

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

此处auto设置相对于其父img容器的div水平边距，以便每个img元素在其共享{{1}内部具有相等的水平边距} 容器。

图像的父div容器没有固定宽度。因此，随着浏览器宽度的增加，此父容器的宽度将增加。

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

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

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

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

以下是 CodePen Demo ，您也可以运行以下代码段：

＆＃13;

0.5rem

＆＃13;

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;
}

＆＃13;

Answer 4

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>

Answer 5

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何居中多个图像

5 个答案: