如何在HTML/CSS中居中放置一组图像？

我正在为一个朋友制作一个简单的网站，但我似乎无法将5张png图像放在中心位置？ 我把它们放在一个div中，图像本身使用display:block；利润率：汽车；要居中，之前只使用一张图片，如下图所示。 我的代码：

.middleContent{
宽度：100%；
顶部：50px；
位置：相对位置；
}
氢{
字体系列：helvetica；
字体大小：15px；
文本对齐：居中；
浮动：左；
宽度：20%；
位置：相对位置；
顶部：30px；
}
.middlePhoto1、.middlePhoto2、.middlePhoto3、.middlePhoto4、.middlePhoto5{
宽度：15%；
右：2%；
左：2%；
}

您可以尝试以下方法：

.middleContent{
    /* Use text align to center them; */
    text-align: center;
}

.middleContent1, 
.middleContent2, 
.middleContent3, 
.middleContent4, 
.middleContent5{
    /* Display them as inline-blocks; */
    display: inline-block;
}

或者更好的方法是，使用CSS选择器来完成这项工作，而不是给所有人一个不同的类：

.middleContent > img {
    /* Display them as inline-blocks; */
    display: inline-block;
}

主要问题是你的

浮动：左<代码>浮动

s使

边距：自动

无效，因为

浮动

的目的是允许其他项目环绕它。你可以试着把它脱下来，因为我一开始就不觉得有必要

使现代化 你问的是如何浮动两个相邻的块，中间没有间隙，你可以使用字体大小和内联块。请尝试以下操作：

html {
    /* Make sure you have a fontsize here as it will be useful for modern browser resetting (this is the `rem` value, or Root EM) */
    font-size: 16px;
}

.middleContent {
    /* Eliminate any gaps between inline-block elements by setting the font-size to 0 */
    font-size: 0;
    /* Set a percentage width to make your blocks scalable */
    width: 50%;
    /* Set a max-width to make sure your images stop scaling at some point */
    max-width: 200px;
}
.middleContent * {
    /* Make sure any tags inside your block WILL be able to contain text */
    /* Start by defining it in pixels for older browsers */
    font-size: 16px;
    /* Then reset your font-size to the rem value. Older browser will fall back to 16px, but its not a huge issue. */
    font-size: 1rem;
}

你可以试试这个：

.middleContent{
    /* Use text align to center them; */
    text-align: center;
}

.middleContent1, 
.middleContent2, 
.middleContent3, 
.middleContent4, 
.middleContent5{
    /* Display them as inline-blocks; */
    display: inline-block;
}

或者更好的方法是，使用CSS选择器来完成这项工作，而不是给所有人一个不同的类：

.middleContent > img {
    /* Display them as inline-blocks; */
    display: inline-block;
}

主要问题是你的

浮动：左<代码>浮动

s使

边距：自动

无效，因为

浮动

的目的是允许其他项目环绕它。你可以试着把它脱下来，因为我一开始就不觉得有必要

使现代化 你问的是如何浮动两个相邻的块，中间没有间隙，你可以使用字体大小和内联块。请尝试以下操作：

html {
    /* Make sure you have a fontsize here as it will be useful for modern browser resetting (this is the `rem` value, or Root EM) */
    font-size: 16px;
}

.middleContent {
    /* Eliminate any gaps between inline-block elements by setting the font-size to 0 */
    font-size: 0;
    /* Set a percentage width to make your blocks scalable */
    width: 50%;
    /* Set a max-width to make sure your images stop scaling at some point */
    max-width: 200px;
}
.middleContent * {
    /* Make sure any tags inside your block WILL be able to contain text */
    /* Start by defining it in pixels for older browsers */
    font-size: 16px;
    /* Then reset your font-size to the rem value. Older browser will fall back to 16px, but its not a huge issue. */
    font-size: 1rem;
}

---

您需要将

margin:auto

添加到图像容器

middleContent

，然后更改图像的宽度。只更改CSS中的样式是一种很好的做法，因此从图像中删除宽度并为其添加新的CSS规则将为您提供更好的控制。我创建了一个应用程序，这样你就可以看到我的建议。如上所述，您不需要所有不同的类，您可以使用CSS选择器，如

.middleContent img

.middleContent {
    width: 50%;
    margin: auto;
}

.middleContent img {
    width: 20%;
    float: left;
    display: block;
}

---

您需要将

margin:auto

添加到图像容器

middleContent

，然后更改图像的宽度。只更改CSS中的样式是一种很好的做法，因此从图像中删除宽度并为其添加新的CSS规则将为您提供更好的控制。我创建了一个应用程序，这样你就可以看到我的建议。如上所述，您不需要所有不同的类，您可以使用CSS选择器，如

.middleContent img

.middleContent {
    width: 50%;
    margin: auto;
}

.middleContent img {
    width: 20%;
    float: left;
    display: block;
}

---

您可以尝试使用align as middle查找下面的代码段

.middleContent1, 
.middleContent2,
.middleContent3,
.middleContent4,
.middleContent5,
 {
 align:middle;
  }

---

fiddle link

您可以尝试使用align as middle查找下面的代码段

.middleContent1, 
.middleContent2,
.middleContent3,
.middleContent4,
.middleContent5,
 {
 align:middle;
  }

---

fiddle link

对于图像，为它们提供与您将类视为id相同的类。对于图像，为它们提供与您将类视为id相同的类。这不起作用，是的，

middleContent

将居中，但是图像将位于

middleContent

块的左侧……他的代码确实有效，而且也应该如此。它位于div本身的中心。但其他人并不完全理解我的问题。我想让他们挨在一起。但谢谢大家，你们都很棒。但是等等。。它不起作用，它居中是因为宽度，但只要我改变它们，你就可以看到它不居中。这不起作用，是的，

middleContent

将居中，但图像将位于

middleContent

块的左侧……他的代码确实起作用，而且应该是这样的。它位于div本身的中心。但其他人并不完全理解我的问题。我想让他们挨在一起。但谢谢大家，你们都很棒。但是等等。。它不起作用，因为宽度的原因，它居中，但只要我改变它们，你就会看到它不居中..你的代码做到了！对我认为float:left可以在两个对象都是50%的100%div时使用，第二个对象将彼此相邻。这就是我在这5幅图像上所做的。@mustafatosuncu是的，但只有当你

浮动
外框时，它才会使你的
边距无效：auto
。您可以使用
内联块
并将
字体大小
重置为
0
。（因此：
html{font size:16px；/*这是使用rems-用于在行的后面重置ems.*/}。外部块：{font size:0；/*这消除了内联块元素之间的任何间隙。*/}。外部块*{font size:16px；font size:1rem；/*这将再次重置所有子元素的字体大小*/}
将删除放置在外部块中的所有元素的边距。）实际上，让我为此更改我的帖子。在我为每个元素添加h2标题后，它就不起作用了。。我会更新我的codes@mustafatosuncu这是因为您的
h2
不是内联元素。你需要再次定义它。确保这一点的最佳方法是添加以下行：
.middleContent>*{display:inline block；}
，这将把inline block应用于
.middleContent
的所有直接子级。如果你想这样做，你必须开始分块思考。如果每个
img
都得到一个
h2
，您需要将两者包装在一个
div
（'block'）中，并将块样式应用到
div
（aka
div
需要
img
样式，
img
probs需要
宽度：100%；
来生成s