html - 垂直中间覆盖在未定义高度的 img 之上，可能吗？

Question

过去一天我一直在努力让它工作，我首先在 chrome 中使用 css 技巧让它工作' block:before方法，但后来我注意到它在 Firefox 中不起作用。

我回去尝试了表格方法，但它在 100% 高度下不起作用。

基本上我有一些砖 block ，我想在每 block 砖 block 的中间放置一个标题。

编辑:我想定位 <p>标记到图片中间，图片高度未知，宽度为200px。

<div class="item">
<p><?php the_title(); ?></p>
<img src="<?php echo $url; ?>"  />
</div>

编辑:我希望文本出现在 Overlay 元素的中间。 <p> tag的高度为1.5em，可以是任意长度，需要overflow auto处理。 overlay 元素绝对定位在 img 之上，img 可以是任何高度，但 200px 宽度。

<div class="item>
<div class="overlay" style="overflow:hidden; height:100%; width:100%; position:absolute;">
<p>the title</p>
</div>
<img src="<?php echo $url; ?>"  />
</div>

感谢帮助。

Answer 1

假设这是您的示例标记:

<div class="item">
    <p><?php the_title(); ?></p>
    <img src="<?php echo $url; ?>" />
</div>

对于纯 CSS 解决方案，我们可以定位 <p>元素绝对在父容器内 .item .这是在 .item 的假设下进行的元素具有定义的宽度，但如果您使用 jQuery 砌体(如您的问题)，那么宽度通常是预定义的。

诀窍是使用位置 <p>元素居中，顶部和左侧各占 50%，然后使用 CSS3 变换将元素偏移其自身尺寸的一半:

.item {
    position: relative;
    width: 300px;
}
.item > p {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.item > img {
    display: block;
    width: 100%;
}

http://jsfiddle.net/teddyrised/e3pFy/3/

---

这种纯 CSS 解决方案的缺点是它需要供应商前缀，并且不支持较旧的浏览器(例如 IE8)。如果您想确保它也适用于旧浏览器，基于 JS 的解决方案将很有用。在这种情况下，我选择使用 jQuery:

$(function() {
    $(".item > p").each(function() {
        $(this).css({
            "margin-left": $(this).outerWidth() * -0.5,
            "margin-top": $(this).outerHeight() * -0.5
        });
    });
});

因此，我们将使用负的上边距和左边距来代替将元素平移到顶部和左侧，取而代之的是元素自身尺寸的一半。

http://jsfiddle.net/teddyrised/e3pFy/4/

这种方法的主要缺点是你必须监听各种可能改变页面布局的事件，例如视口(viewport)调整事件等，我觉得这些很麻烦而且臃肿。