<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300"
height="437" /></a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div><br />
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437"
/>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
</body>
</html>
</body>
</html>
我试图水平对齐两个 div 图像。
我从这个网站借用了在图像上叠加文字的代码:
我只是添加了一个随机的图片和文本来查看这段代码是否有效，它工作得非常好，但它们是垂直显示的。如何水平对齐它们？将不胜感激。
最佳答案
如果我理解您的问题，您需要将两张图片并排放置。如果是这样，您需要调整您的 CSS和 HTML允许:
查看此工作 Fiddle Example!
HTML
<div class="imageSub" style="width: 300px;">
<a href="../../../Downloads/Unnamed Site 2/stem studio.html">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
</a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
<div class="imageSub" style="width: 300px;">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
删除了 <br>
CSS
div.imageSub {
position: relative;
float: left;
}
div.imageSub img {
z-index: 1;
}
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
已添加 float: left;到 div.imageSub
已编辑
工作Fiddle Example基于之前的修复，适用于 3x2 视觉呈现。
关于css - 水平对齐 Div 图像 - Dreamweaver CS5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10729245/