Html 我可以将a<；部门>；超过一个<；img>；垂直和可变？

以下是一些HTML：

<div class="float">
    <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
    <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
    <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>

基本上，这样做是把一列图片放在页面的左侧。没什么大不了的。然而，我需要这些照片中的每一张，都是专辑封面，都有专辑标题。这些专辑标题的外观是这样的：带有白色文本的橙色矩形。然后在img上垂直居中。问题是每个图像都有不同的高度，所以我需要将这些标题与img对齐

另外，作为一个附加组件，我创建了一个渐变，使第一幅图像的顶部淡入白色，最后一幅图像的底部淡入白色。当您将鼠标悬停在淡入淡出状态上时，图像将开始使用jquery滚动。这里的问题是，我无法让这些渐变保持在它们固定的位置，并在调整页面大小时切断图像的底部和顶部。我将附上它的外观图片

---

还有一个问题，专辑标题应该是90%不透明度。图像的不透明度应为40%。将鼠标悬停在图像上应将图像更改为100%不透明度，将albumTitle更改为30%不透明度。将鼠标悬停在albumTitle上应具有相同的效果。我也不知道如何解决这个问题。

第一部分：您可以使用jQuery动态地将标题居中

---

如果没有jQuery，您可能必须使用容器div，以及垂直居中标题的跨浏览器解决方案

为什么这个标签是HTML5和CSS3？很抱歉花了这么长时间才回复你…我可以看出它是有效的；但是，当我有多个图像时，它对我不起作用。你能诊断一下这个代码吗？

div.float
{
    border-right: 1px solid orange;
    position: absolute;
    z-index: 2;
    margin-left: 5px;
    margin-top: 5px;
    float: left;
    width: 200px;
}

div.mask
{
    position: relative;
    z-index: 1;
    margin-top: 5px;
    float: left;
    width: 206px;
    height: 805px;
    background-color: white;
}

img.left
{
    z-index: inherit;
    margin-bottom: 3px;
    float: left;
    width: 200px; 
    min-height: 200px; /* for modern browsers */
    height: auto !important; /* for modern browsers */
    height: 200px; /* for IE5.x and IE6 */
    opacity: 0.4;
    filter: alpha(opacity=40);
}

img.left:hover
{
    opacity: 1;
}