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

垂直与显示屏对齐：显示屏中包含的表格单元格：表格无效

1 个答案: