html - 使用 CSS 将 3 个图像居中

Question

有一组图片需要在不同的section下在同一条线上水平居中。我想成为一种特殊类型的图像，它实际上来自标签。

我需要所有这些图像，包括输入标签图像，始终以各自的 div 为中心。

现在我的标记基本上是:

     <div class="col-xs-6 col-sm-3">
       <h1>Some centered text</h1>
        <div class="image-container">   
           <img class="contact-images" src="image1.png" />
           <img class="contact-images" src="image2.png" />
           <div class="email-image">
                    <form action="contact-team-member.php" method="POST">
                        <INPUT TYPE="hidden" NAME="1" VALUE="one">
                        <INPUT TYPE="hidden" NAME="2" VALUE="two">
                        <input type="image" class="contact-images" src="image3.png" alt="Submit Form" />
                    </form>
           </div>
       </div>
    </div>

使用 CSS:

.image-container {
    text-align: center;
}
.contact-images {
    display: inline-block;
    padding: 5px;
}

这是我在用谷歌搜索问题解决方案时在论坛上找到的在线推荐的 CSS，不幸的是，它对我不起作用。

不幸的是，图像居中但全部堆叠在彼此之上——而不是在一条水平线上。我认为这是由输入图像引起的。

这是我网站上的实际图片:

Answer 1

JS Fiddle

在 % 中给出宽度，这样它们就不会在浏览器调整大小时到达底部，父级的 width 也会减小，所以 % 将有助于检查上面的 fiddle

.contact-images {
    display: inline-block;
    padding: 5px;
    width:20%;
    height:auto; 
}