在垂直居中位置显示图像悬停div

Question

全

我想在图像上显示一个垂直对齐的水平条纹。这是我的代码

Html

<div class="demobox" id="demo-5">
        <img src="Untitled-1000x288.jpg" />
        <div class="details">
            <h3>Play Trialer</h3>
        </div>
</div> 

css

#demo-5 {
    position: relative;
}

.demobox {

    float: left;
    height: 288px;

    overflow: hidden;
    width: 1000px;
}

#demo-5:hover .details {
    margin-left: 0;
}

#demo-5 .details {
    left: 0;
    margin-left: -1200px;
    opacity: 0.7;
    filter:alpha(opacity=70);
    position: absolute;
    top: 0;
}

.details {
    background: none repeat scroll 0 0 #000000;
    color: #FF0000;
    height: 50px;
    margin-top: 119px;
    text-align: center;
    width: 735px;
}

现在的问题是图像没有固定的高度& width.And我想在中间显示水平条纹，我该怎么做？

将非常感谢您的帮助！

Answer 1

您需要将容器的css位置设置为相对位置，并在容器内绝对定位图像的标题。

技巧是使用百分比垂直定位，并通过页边距顶部减去一半的条纹高度。

jsfiddle上的一个简单示例。

编辑:我读错了这个问题……以下是更正后的答案:-)