9

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

4

3 回答 3

10

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

  1. 建立绝对定位
  2. 建立表格布局
  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/

于 2013-01-21T21:26:23.633 回答
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>
于 2013-01-21T19:14:42.883 回答
0

垂直对齐在 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；或使用元素使用位置：绝对；

于 2013-01-21T18:46:01.350 回答