我已经阅读了几篇关于此的不同文章,但由于某种原因,今天我无法全神贯注。
在 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>
任何想法或链接表示赞赏。谢谢:)
最佳答案
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;
}
关于javascript - 使 div 在图像/容器上居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21151333/