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

Posted 2023-03-05

【中文标题】如何在 HTML/CSS 中居中一组图像？

【英文标题】：How to center a group of images in HTML/CSS?

【发布时间】：2015-05-07 23:03:52

【问题描述】：

我正在为朋友制作一个简单的网站，但我似乎无法将 5 个 png 图像居中？ 我将它们放在一个 div 中，并且图像本身正在使用 display: block;和边距：自动；正如您将在下面看到的那样，将之前确实有效的仅用于 1 张图片的居中。 我的代码：

 .middleContent
        width: 100%;
        top: 50px;
        position: relative;
    
    
    h2
        font-family: helvetica;
        font-size: 15px;
        text-align: center;
        float: left;
        width: 20%;
        position: relative;
        top: 30px;
    
    
    .middlePhoto1, .middlePhoto2, .middlePhoto3, .middlePhoto4, .middlePhoto5
        width: 15%;
        padding-right: 2%;
        padding-left: 2%;
    

<div class="mainContent">
    				<img class="topContent" src="img/homepage.jpg"></img>
    				<div class="middleContent">
    					<img class="middlePhoto1" src="img/icon1.png"></img>			 	
    					<img class="middlePhoto2" src="img/icon2.png"></img>		
    					<img class="middlePhoto3" src="img/icon3.png"></img>				
    					<img class="middlePhoto4" src="img/icon4.png"></img>
    					<img class="middlePhoto5" src="img/icon5.png"></img>
    				</div>
    			</div>

    

所以我对其进行了一些编辑，现在图像位于屏幕的中心，但如果有意义的话，仍然不在中心屏幕的中心。我只使用了 5% 的填充，我还剩下 300 像素，但是当它确实有足够的像素空间时，第五个图标仍然不适合？？？！？！？！？！？！？！？！

【问题讨论】：

对于图像，为它们提供与您将类视为 id 相同的类。

【参考方案1】：

你可以试试这个：

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


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

或者甚至更好，而不是给它们 all 一个不同的类，而是使用 CSS 选择器来完成这项工作：

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

主要问题是您的float: left;。 Floats 使margin: auto 无效，因为float 的目的是允许其他项目环绕它。你可以试着把它去掉，因为我一开始觉得这里不需要它。

更新

你问的是如何浮动两个相邻的块，中间没有间隙，你可以使用 font-size 和 inline-blocks 来做到这一点。请尝试以下操作：

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;

【讨论】：

你的代码做到了！是的！我虽然 float: left 可以在你有 2 个对象时使用，并且两者在 100% div 中都是 50%，第二个对象将彼此相邻。这就是我对 5 张图片的尝试。

@mustafatosuncu 是的，这有效，但前提是您 float 和 outer box，这会使您的 margin: auto 无效。您可以使用inline-block 并将font-size 重置为0。 （所以：html font-size: 16px; /* This is to use rems - usefull for resetting ems further down the line.*/ .outer-block: font-size: 0; /* This eliminates any gaps between inline-block elements. */ .outer-block * font-size: 16px; font-size: 1rem; /* This resets all child elements' font-size again */ 将删除放置在外部块内的元素的所有边距。）实际上让我为此更改我的帖子。

在我为它们每个都添加了一个 h2 标头后它不起作用.. 我将更新我的代码

@mustafatosuncu 那是因为您的h2 不是内联元素。您需要再次定义它。确保这一点的最佳方法是添加以下行：.middleContent > * display: inline-block; ，它将内联块应用于.middleContent 的所有 direct 子级。如果你想这样做，你必须开始思考。如果每个img 得到一个h2，您需要将两者包装在一起div('block') 并将块样式应用于div（又名div 需要img 样式和img probs 需要 width: 100%; 以确保它不会溢出）。

但是h2和img是分开的。 img 包含在中间内容中，h2 包含在 maincontent 中。一个简单的问题是我现在无法将 img 居中。当我离开 h2 并返回到之前的状态时，图像保持这样，其中 4 浮动在 otherother 旁边，第五个图像得到居中在其他图像下方。这是这些代码可以在您的设备上运行但不能在我的设备上运行（联想笔记本电脑）的情况之一吗？

【参考方案2】：

你可以尝试使用 align 作为中间找到下面的代码 sn-p

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

小提琴链接http://jsfiddle.net/pwwacgg1/2/

【参考方案3】：

您需要将margin: auto 添加到图像容器middleContent 中，然后更改图像的宽度。最好只更改 CSS 中的样式，因此从图像中删除宽度并为它们添加新的 CSS 规则将为您提供更好的控制。我创建了一个jsFiddle，这样你就可以看到我在行动中提出的建议。如上所述，您不需要所有不同的类，您可以使用 CSS 选择器，例如 .middleContent img。

.middleContent 
    width: 50%;
    margin: auto;


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

【讨论】：

这行不通，是的，middleContent 将居中，但图像将位于 middleContent 块的左侧...

他的代码确实有效，而且应该是这样。它以 div 本身为中心。但是其他人不太理解我的问题。我希望它们彼此相邻居中。但是谢谢大家，你们都很棒。但是等等..它没有用，它因为宽度而居中但是一旦我改变它们，你就会看到它没有居中..