垂直对齐绝对定位的<p>内部图像[关闭]

Question

如何垂直对齐图像内绝对定位的p 元素？

<div>
    <img class="test-img" src="test.jpg">
    <p class="tag">text with multiple lines here</p>
</div>

因为我不知道它的高度。

编辑

我的图片不能是背景，它是在运行时加载的。我想将文本放在图像中。到目前为止我所拥有的就是这张图片，我的文字是top: 0。我现在想将它垂直对齐到图像的中间。

我的 CSS：

.test-img {
    height: 320px;
    width: 240px;
}

.tag {
    position: absolute;
    top: 0;
}

div {
    height: 320px;
    width: 240px;
    display: inline-block;
    position: relative;
}

我不知道我的p 标签的高度，因为它的文本来自数据库。

Answer 1

除了使用 display:table; 之外，CSS 确实没有什么可以做到这一点（特别是因为它必须是动态高度），但至少现在是 it has pretty good compatibility

.test-img {
    height: 320px;
    width: 240px;
    display:block;
}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
}

.tag {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 30px;
    padding: 1em;
}

.outer {
    height: 320px;
    width: 240px;
    position: relative;
}

<div class="outer">
    <img class="test-img" src="//placehold.it/240x320">
    <div class="inner">
        <p class="tag">text with multiple lines here</p>
    </div>
</div>

Answer 2

为什么不尝试标签中的样式

<p class="tag" style="position: absolute; right:140px; top:320px;"  >
   text with multiple lines here
</p>

或者添加一个id并在css中设置id的样式

<p class="tag" id="my_id"   >
   text with multiple lines here
</p>

在css中

#my_id {
   position: absolute; right:140px; top:320px;
}

你也可以试试margin-top: 360px;