CSS - 绝对定位段落中的垂直对齐文本

Question

在我们开始之前:
请不要将此作为另一个问题的副本关闭.我刚刚在Stackoverflow上搜索过,但没有找到确切的情况.

最接近的是我相信这个问题.尽管如此,那里给出的回复对我来说并不合适,我相信因为段落已经定下来了position: absolute;.

那是HTML:

<ul>
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>

而CSS:

li {
  position: relative;
  float: left;
  overflow: hidden;
}

img {
  width: 100%;
  vertical-align: middle;
}

p {
  background-color: rgba(255, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

span {
    background-color: rgba(0, 255, 0, .3);
    vertical-align: middle;
}

小提琴:http://jsfiddle.net/DpVjZ/

vertical-align: middle;只是将文本从顶部稍微偏移,但实际上不在中间.
设置跨度position: absolute;然后应用top: 50%;然后margin-top: -x%;将无法工作,因为跨度的高度未知,因为它是动态内容.
虽然链接的问题表明这是不好的做法,但我也尝试了这种display: table-cell方法而没有任何结果.请帮我.

Answer 1

如果不对文本或图像的假定高度进行硬编码,我(遗憾的是)不能在不到3层中解决这个问题:

1. 建立绝对定位
2. 建立表格布局
3. 建立表格单元格布局和垂直对齐:中间

结合1和2似乎可以防止身高:因为我不知道的原因而工作100%.我认为对表格单元布局的拒绝似乎是对旧的"不要使用表格进行布局"模仿的挪用; CSS用于布局,因此这不会滥用元素语义.(虽然不幸的是它需要语义无意义的div.)

<ul>
<li>
    <img src="http://www.placehold.it/300x200" />
    <div class="absolute">
        <div class="table">
            <div class="middle">
                <p><span>Lorem Ipsum</span>
                </p>
            </div>
        </div>
    </div>
</li>
</ul>


li {
    position: relative;
    float: left;
    overflow: hidden;
}
img {
    width: 100%;
}
.absolute, .table, .middle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.absolute {
    position: absolute;
}
.table {
    display: table;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
p {
    background-color: rgba(255, 0, 0, .3);
}
span {
    background-color: rgba(0, 255, 0, .3);
}

http://jsfiddle.net/svachalek/vTGxx/4/

Answer 2

去掉 p 标签。无论如何，你已经在里里有了它。

CSS

li {
position: relative;
float: left;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
}

span {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

html

<ul>
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>

在 IE9 和 Chrome 窗口上进行了测试。

不知道它是否用于演示，但如果您希望图像上有红色阴影，请为 Span 标记创建一个类，然后插入一个带有该类的新 Span。

span.text {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

span.redshade {
background-color: rgba(255, 0, 0, .3);
width: 100%;
height: 100%;

<ul>
<li><span class="redshade">&nbsp;</span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>