如何将HTML/CSS中的一组图片居中？

Question

我正在为朋友制作一个简单的网站，我似乎无法将 5 个 png 图像居中？我把它们放在 div 中，图像本身正在使用 display: block;和保证金：自动；到中心，它之前只使用了一张图片，正如您将在下面看到的那样。我的代码：

 .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% 的 padding right 并且我有 300px 左边但是第五个图标仍然不适合当它有足够的像素 space 离开时？？？！？！？！？！？！？ !?!

Answer 1

你可以试试这个：

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

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

或者甚至更好，而不是给他们所有一个不同的class，使用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;
}

Answer 2

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

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

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

Answer 3

你可以试试中间对齐找到下面的代码片段

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

fiddle link http://jsfiddle.net/pwwacgg1/2/

如何将HTML/CSS中的一组图片居中？

How to center a group of images in HTML/CSS?

html

css

image

center

更新