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

【问题标题】：CSS - Vertical align text in absolute positioned paragraphCSS - 在绝对定位的段落中垂直对齐文本
【发布时间】：2013-01-04 20:59:39
【问题描述】：

开始之前：
请不要将其作为另一个问题的副本关闭。我只是在 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 方法，但没有任何结果。请帮帮我。

【问题讨论】：

为什么列表项中有块级元素？您不认为这就是您遇到问题的原因吗？
据我所知，唯一不允许包含块级元素的列表元素是dt。
您当然可以将列表项设置为display:block;。我认为您是从望远镜的错误一端来解决问题的。你想达到什么目的？从视觉上看，它应该是什么样子？文字是否应该在图片上方？
@JezenThomas 是的，文本应该在图像的顶部，垂直和水平居中。将列表项设置为display: block; 对我没有任何帮助，您能否详细说明一下？
图片和文字的大小我假设是未知的？

标签： html css vertical-alignment paragraph

【解决方案1】：

如果不对文本或图像的假定高度进行硬编码，我（很遗憾）无法在不到 3 层的时间内解决这个问题：

建立绝对定位
建立表格布局
建立表格单元格布局和垂直对齐：中间

结合 1 和 2 似乎可以防止 height: 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/

【讨论】：

+1 这有点复杂，但确实考虑了未知的宽度和高度。我将您的帖子编辑为 text-align:center p 标签并更新了小提琴并清理了代码。

【解决方案2】：

去掉 p 标签。反正你已经在 li 里了。

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>

【讨论】：

谢谢！我喜欢您的解决方案提供出色结果且易于理解的方式。
顶部：46% 是硬编码对跨度高度的猜测；它不是以任意跨度为中心的。
@svachalek 是的，这是一种单行文本解决方案。多线解决方案要复杂得多。它以任意图像大小为中心。如果跨度和图像已知，它也可以工作。
@Sven 感谢您的选择。

【解决方案3】：

垂直对齐在 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 位置：固定；高度：100%；宽度：100%；左：0px；顶部：0px；或使用元素使用 position: absolute;

【讨论】：