javascript - 使 div 在图像/容器上居中

Question

我已经阅读了几篇关于此的不同文章，但由于某种原因，今天我无法全神贯注。

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

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

这是元素 http://cl.ly/image/3X3t2t2g3h22 的虚拟示例

我可能会尝试的 html 结构的 fiddle ...... 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/