EDITED

Question

 <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图像。

我借用了覆盖本网站图片上文字的代码：

我刚刚添加了一张随机图片和文字，看看这段代码是否有效，它的效果非常好，但它们是纵向出现的。如何水平对齐？将不胜感激任何帮助。

Answer 1

删除<br/>

添加css规则

.imageSub { float: left;}
.clear { clear: both; }

将<div class="clear"/>添加到最后。

不要忘记浮动环境中的第3步。

jsfiddle

Answer 2

如果我理解你的问题，你需要将两个图像并排。如果是这样，您需要调整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

EDITED

基于之前修复的工作Fiddle Example，适用于3x2视觉演示。

Answer 3

这是一个简单的2 x 3 div解决方案，使用浮点数：http://jsfiddle.net/Fb6Jk/

水平对齐Div图像 - Dreamweaver CS5

3 个答案:

EDITED