使用 CSS 将 3 个图像居中答案

【问题标题】：Centering 3 Images with CSS使用 CSS 将 3 个图像居中
【发布时间】：2014-10-05 18:33:51
【问题描述】：

有一组图像需要在不同部分下的同一行上水平居中。我想成为一种实际上来自标签的特殊类型的图像。

我需要所有这些图像，包括输入标签图像，始终以各自的 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，不幸的是它对我不起作用。

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

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

【问题讨论】：

我的问题只是一个错字！抱歉，它现在修复了@misterManSam
网站是texasca.com/team 不想广泛分享，但我现在将链接作为评论放上去
开始：team.css 的第 67 行 .employee-profile img 当前为 display:block 更改为内联块
实际上，由于这个问题无法真正复制（sn-p 提供的代码效果很好），我将投票关闭。不用麻烦 :) 请删除所有多余的 cmets :)
你说得对，我会关闭它。我很抱歉。感谢您的所有帮助

标签： html css image centering

【解决方案1】：

JS Fiddle

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

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

【讨论】：

【解决方案2】：

您忘记了 CSS 规则中的点...

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

【讨论】：

这只是输入问题时的错误，我的实际 CSS 有点，不过感谢您指出这一点！

【解决方案3】：

使用这个demo

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

【讨论】：

是的，我不明白为什么它在 Fiddle 中有效，而不是在我的网站上 :(
能否提供您网站的链接？
@Zach Cook 你正在使用 twitter boostrap 你不需要额外的 css 只需使用 grid classes 并从 boostrap 偏移

【解决方案4】：

试试这个http://jsfiddle.net/0sqkpg9t/你忘了在你的css中添加点

.image-container {

background-color:gold;
width:500px;
height:220px;
text-align: center;
}
.contact-images {

width:200px;
height:200px;
display: inline-block;
}

【讨论】：