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

开始之前：
请不要将此作为另一个问题的重复关闭。我只是在Stackoverflow上搜索了一下，没有找到确切的案例

最接近的是我相信。尽管如此，这里给出的回复对我来说还是不起作用，我相信这是因为该段落设置了

位置：绝对

这就是HTML：

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

小提琴：

垂直对齐：中间对齐只是将文本从顶部颠簸一点点，但实际上不在中间。
设置span
位置：绝对然后应用
top:50%然后
页边距顶部：-x%不起作用，因为跨度的高度未知，因为它是动态内容。

虽然链接的问题指出这是一种糟糕的做法，但我也尝试了
display:table cell
方法，但没有任何结果。请帮帮我。
垂直对齐在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>


html，正文，#包装{高度：100%；}
#包装器{显示：表格；宽度：100%；}/*创建空间*/
#包装器>*{显示：表格单元格；垂直对齐：中间；}/*表格单元格可以垂直对齐*/
#包装器>*>。容器{显示：块；边距：自动；宽度：600px；边框：1px实心#000000；}/*水平对齐*/

我在流体布局中居中！：D


编辑
顶部将此元素放置在另一个元素的顶部，使#包装器位置：固定；身高：100%；宽度：100%；左：0px；顶部：0px；或元素使用位置：绝对
 去掉p标签。不管怎样，你已经有了它

css

html


同侧眼睑


在WindowsIE9和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>

span.text{
背景色：rgba（0,255,0,3）；
位置：绝对位置；
文本对齐：居中；
宽度：100%；
最高：46%；
}
红荫{
背景色：rgba（255,0,0,3）；
宽度：100%；
身高：100%；

同侧眼睑

如果不对文本或图像的假定高度进行硬编码，我（很遗憾）无法在少于3层中解决此问题：

建立绝对定位
建立表格布局
建立表格单元布局并垂直对齐：中间
将1和2结合起来似乎可以防止height:100%因为我不知道的原因而工作。我认为拒绝表单元格布局似乎是对旧的“不要将表用于布局”模因的滥用；CSS用于布局，因此这不会滥用元素语义。（尽管不幸的是，它需要语义上无意义的div。）



同侧眼睑



李{
位置：相对位置；
浮动：左；
溢出：隐藏；
}
img{
宽度：100%；
}
.绝对、.表、.中间{
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.绝对的{
位置：绝对位置；
}
.桌子{
显示：表格；
}
.中{
显示：表格单元格；
垂直对齐：中间对齐；
}
p{
背景色：rgba（255,0,0,3）；
}
跨度{
背景色：rgba（0,255,0,3）；
}

为什么列表项中有块级元素？你不认为这就是你遇到问题的原因吗？据我所知，唯一不允许包含块级元素的列表元素是
dt
。你当然可以将列表项设置为
display:block；
。我认为你是从t开始解决问题的他把望远镜的一端弄错了。你想达到什么目的？视觉上，它应该是什么样子？文本应该在图像的顶部吗？@JezenThomas是的，文本应该在图像的顶部，垂直和水平居中。将列表项设置为
显示：block；
对我没有任何帮助，可以吗再详细一点？我想图像和文本的大小是未知的？谢谢！我喜欢你的解决方案能够提供很好的结果，而且也很容易理解。顶部：46%是对跨度高度的猜测进行硬编码；它不是任意跨度的居中。@svachalek是的，这是一行文本解决方案。多行解决方案更容易理解h更复杂。它对任意图像大小居中。如果跨度和图像已知，它也会起作用。@Sven感谢您的选择。+1这有点复杂，但会导致未知的宽度和高度。我将您的帖子编辑为文本对齐：将p标记居中，更新小提琴并清理代码。
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%;
}

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

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>

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