0

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

我回去尝试使用表格方法，但它不适用于 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>

帮助表示赞赏。

4

2 回答 2

1

假设这是您的示例标记：

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

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

诀窍是使用将<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/

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

于 2013-11-04T11:55:53.653 回答
0

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

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

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

于 2013-11-04T12:32:13.257 回答