水平对齐div

Question

我有以下的Div：

   <div class = "left">
     <div class = "custimage"><img src = "img/notch.jpg" alt = "notch"/><p>Notch</p></div>
     <div class = "custimage"><img src = "img/peak.jpg" alt = "peak"/><p>Peak</p></div>
     <div class = "custimage"><img src = "img/shawl.jpg" alt = "shawl"/><p>Shawl</p></div>
   </div>

CSS代码如下：

.left {
    position: relative;
    float: left;
    width:600px;
    height:200px;
    background-color: #000;
    opacity: 0.7;
}

.custimage{
   position:relative;
   margin-top: 15px;
   margin-left: 15px;
   height: 170px;
   width: 130px;
   background-color: #999;
   text-align:left;
}

.custimage p{
    color: #fff;
    font:normal 60%/1.5 Helvetica, Arial, sans-serif;
    padding-left: 5px;
}

图像在水平方向上没有对齐：http://www.everry.com/new/customise/customisenow.html。我哪里出了错？

- user559142

---

在Chrome和IE上看起来非常对齐。 - Variant

Answer 1

在 .custimage 上应用 float:left。

.custimage{
   position:relative;
   margin-top: 15px;
   margin-left: 15px;
   height: 170px;
   width: 130px;
   background-color: #999;
   text-align:left;
   float: left;  // float all cust images to the left so they stack up against each other
}

- aziz punjani

Answer 2

两种方法：

第一种：将 float:left 添加到你的 .custimage。

第二种：不使用 float，而是将 display:inline-block 添加到你的 .custimage。

第二种方法在旧浏览器中无效，但比让所有元素浮动更加清晰。

- Flyingmana

Answer 3

将 .custimage 添加 float: left。

- afkbowflexin