与display:table中包含的表格单元格垂直对齐

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作为.coverdiv在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;
}