Question

我已经阅读了一些关于此的文章，但由于某种原因我今天无法理解它。

在WordPress中，我将有一个实际的img标签（在div容器中）并且希望覆盖帖子标题和一些摘录文本，以图像本身为中心。

棘手的是......除非我想限制用户和帖子标题长度，否则我不会知道图像的高度。使用css作为默认值并使用jQuery来增强样式是一种选择。

的虚拟示例

我可能会拍摄的html结构的小提琴...... http://jsfiddle.net/4857G/

<div class="featured">
    <img src="http://dummyimage.com/800x400" />
    <div class="overlay">
        <h1>Post Title!</h1>
        <p>Something else of variable length.</p>
    </div>
</div>

任何想法或链接表示赞赏。谢谢:)）

Answer 1

HTML

<div id="contain">
    <img src="http://placehold.it/200x100">
    <div id="over"></div>
</div>

和css：

#contain {
    position: relative;
    width: 200px;
}
#over {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    top: 0;
    left: 50px;
}

http://jsfiddle.net/djedjex/q4LTr/1/

Answer 2

此css将文本水平居中，但您仍需要固定的顶部或底部位置。

http://jsfiddle.net/4857G/1/

.overlay{
   position: absolute; 
   top: 250px; 
   width: 100%; 
   text-align:center;
}:

将div居中放在图像/容器上

2 个答案: