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

为什么你不在标签中尝试样式

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

Answer 2

除了使用 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>

垂直对齐图像内的绝对定位 <p>

Vertically align absolute positioned <p> inside image

html

css

absolute

vertical-alignment