Html 如何将3张图片完美地水平对齐？

我有一个有三种颜色的主页，每种颜色被分成1/3的页面，每种颜色都必须是一个居中的图片，当鼠标悬停在上面时会翻转。我无法将三张图片完全分开对齐，但也不能将每一面的颜色都居中对齐

正文{
保证金：0；
填充：0；
宽度：100%；
背景：url（../img/backgroundIndex.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.indexLogo{
宽度：100%；
}
.indexLogoImg{
宽度：40%；
左缘：30%；
z指数：10；
位置：绝对位置；
}
#集装箱{
位置：相对位置；
利润率最高：25%；
宽度：200px；
高度：120px；
z指数：1；
右：10%；
左：8%；
浮动：左；
}
#集装箱{
前景：1 000；
}
#f1_卡{
宽度：100%；
身高：100%；
变换样式：保留-3d；
过渡：所有0.4s线性；
}
#f1#容器：悬停#f1#卡{
变换：旋转（180度）；
}
.脸{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.正面{
显示：块；
变换：旋转（180度）；
框大小：边框框；
填充：10px；
颜色：白色；
文本对齐：居中；
背景色：#aaa；
}

博特科伊中心酒店

您可以使用下面给出的css

  .f1_container {
         float:left;
         width:33.33%
    }

---

您在多个元素上使用相同的ID名称。这应该在与ID相对的类中完成，因为ID应该是该单个元素的唯一ID。我将在两小时内尝试，但我对此表示怀疑，因为div已经有了图片的eitdh和高度Bro！！你应该试试。。。如果有什么不对劲，请告诉我！！！我还有一个解决办法！！或者你可以在这里给我发送链接。它不起作用，它会改变图片的大小。#f1_容器{宽度：33.33%；文本对齐：居中；}并从两侧移除填充！和.front img{width:100%}不起作用，因为f1_容器的宽度是图片的宽度