Question

我已经尝试过去一天使用了这个工作，我首先使用css技巧'block:before方法在chrome中工作，但后来我注意到它在firefox中不起作用。

我回去尝试使用table方法，但是它没有100％的高度。

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

编辑：我想将<p>标记放置在图像的中间位置，图像都是未知高度但宽度为200像素。

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

编辑：我希望文字出现在Overlay元素的中间。 <p>标记的高度为1.5em，可以是任意长度，应由overflow auto处理。覆盖元素位于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/

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

Answer 2

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

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

（但您也可以根据您使用或将来可能使用的布局来试验提供here的任何示例。

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

2 个答案: