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

我从这个网站借用了在图像上覆盖文本的代码：

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

4

3 回答 3

0

  1. 去除那个<br/>

  2. 添加css规则

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

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

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

jsfiddle

于 2012-05-23T23:39:52.383 回答
0

如果我理解您的问题，您需要将两个图像并排放置。如果是这样，您需要调整CSS并HTML允许：

请参阅此工作小提琴示例！

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

已编辑

一个基于先前修复的工作小提琴示例，适用于 3x2 视觉呈现。

于 2012-05-23T23:46:11.687 回答
0

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

于 2012-05-24T00:05:32.043 回答