垂直对齐图像内的绝对位置<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>

或在css中添加id并设置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;