Question

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

最接近的是我相信this question。尽管如此，那里给出的回复对我来说并不合适，我相信因为段落设置为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

摆脱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>

Answer 2

垂直对齐在CSS中是一个棘手的事情，但是当你熟悉css表时不难实现。

<style>
      html, body, #wrapper { height: 100%; }
      #wrapper { display: table; width: 100%; } /* Create space */
      #wrapper > * { display: table-cell; vertical-align: middle; } /* table-cells can be verticaly aligned! */
      #wrapper > * > .container { display: block; margin: auto; width: 600px; border: 1px solid #000000; } /* Horizontal align */
</style>

<div id="wrapper">
  <section id="main">
    <div class="container">
      <p>
        I'm centered in a fluid layout! :D
      </p>
    </div>
  </section>
</div>

修改将这个元素放在另一个顶部的顶部只是使#wrapper位置：fixed;身高：100％;宽度：100％;左：0px;顶部：0px;或者使用元素使用position：absolute;

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

2 个答案: