html - 垂直对齐显示 :table-cell enclosed in display: table not working

Question

这是我的第一个问题，如果格式有误，请谅解。

我已经尝试了在堆栈溢出中找到的所有方法，但我仍然无法让此内容在中间垂直显示。

CSS:

div.img-wrapper {
  display: table;
  height: 232px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
div.cover {
  display: table-cell;
  height: 232px;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 0;
  vertical-align: middle;
  width: 100%;
}

HTML 标记:

<div class="img-wrapper">
  <img alt="" src="img2.jpg">
  <div class="cover">
    <img alt="" src="img1.png">
    <span class="product-name">Product Name</span>
    <span class="product-sub">Sub Line</span>
  </div>
</div>

我使用 position:absolute 作为 .cover div 在 img 上滚动以显示产品信息。

任何帮助将不胜感激:)

提前致谢。

将

Answer 1

这是我的尝试。需要一个 outter-container，因为表格不会单独覆盖页面的 width 和 height

试试这个:

#outter-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
#img-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
#cover {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

DEMO