Question

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

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

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

以下是我网站上的实际图片：

enter image description here

Answer 1

JS Fiddle

在%中给出宽度，以便它们不会在浏览器重新调整到底部时，父级的width也会减少，因此%将有助于检查上面的小提琴

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

Answer 2

你忘记了css规则中的点......

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

Answer 3

使用此demo

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

Answer 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;
}

使用CSS居中3个图像

4 个答案: