Html 可能的话，在img顶部的未定义高度的垂直中间覆盖层？

在过去的一天里，我一直试图让它工作，我让它首先在chrome中使用css技巧“

block:before

方法，但后来我注意到它在firefox中不起作用

我回去尝试了桌子法，但它在100%高度下不起作用

本质上，我有一些砖石砖头，我想在每个砖块中间放置一个标题。< /P> 编辑：我想将

标记定位到图像的中间，图像的高度未知，但宽度为200px。

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

<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>

"  />

< > >强> >编辑：我希望文本出现在覆盖元素的中间。<>代码> p> < /Cord>标签的高度是1.5米，可以是任何长度，并且应该由溢出自动处理。覆盖元素绝对位于IMG之上，IMG可以是任何高度，但200 px宽度。< /强>

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

<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>

---

感谢您的帮助。

假设这是您的示例标记：

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

---

此纯CSS解决方案的缺点是它需要供应商前缀，并且不支持较旧的浏览器（如IE8）。如果您希望确保它也能在较旧的浏览器中工作，则基于JS的解决方案将非常有用。在这种情况下，我选择使用jQuery：

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

因此，我们将使用负的顶部和左侧边距，而不是将元素转换为其自身维度的一半，将元素转换为顶部和左侧边距，计算为元素自身维度的一半

---

此方法的主要缺点是，您将不得不收听可能会改变页面布局的各种事件，例如视口大小调整事件等，我发现这些事件既麻烦又臃肿。

无论如何，如果您只需要固定大小的“p”元素，那么您可以轻松地执行以下操作：

.item
{
    width:300px;
    position:relative;
}
p
{
    position:absolute;
    height:1.5em;
    margin-top:-.75em;
    top:50%;
}

---

（但你也可以根据你使用或将来使用的布局提供的任何例子来实验）

但是这两个块是如何相互关联的？好吧，忽略第一个块。你想在图像中间（垂直和水平）上放置什么？

元素？那么，你的意思是div的高度取决于内部的img高度，并且你希望“p”位于图像上方并垂直居中？以及“p”的高度“有确定的高度吗？嗯，这不起作用，我只是看了看你的小提琴，标题仍然在左上角？我也尝试过这种方法，因为我在其他地方使用它来定位和成像，但我无法用

标记来复制它。即使“p”元素垂直拉伸，这也不起作用，它的文本仍然垂直对齐到顶部。对不起，这是一把过时的小提琴。让我来修复这个链接。@KyleJoseph刚刚更新了我的答案，加入了一个基于JS的解决方案，以防你想支持没有CSS3 2D转换支持的旧浏览器：）如果我想更改字体大小，尽管我必须修改这段代码，所以它实际上并不理想。谢谢，当然可以。这是最简单的方法（并且受到各种旧浏览器的支持）。