我有以下 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
我做错了什么?
最佳答案
在 .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
}
关于html - 水平对齐 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7842168/