css - 你能用显示器: table/table-cell to vertical-align text over a responsive image (with auto height)?吗

Question

我有一张图片占据了固定导航下方的首屏。我想垂直对齐:将#fold-text 和人字形放在图像的中间。

html 标记:

<div class="row">
  <img class="background-image" src="images/1400px_splash.jpeg">
    <div id="fold-container">
      <div id="fold-text">
        Sign up to learn about upcoming changes!
      </div>
      <div class="fa fa-chevron-down"></div>
    </div>
  </img>
</div>

当我想将一个 div 置于另一个 div 的中心时，下面的这个 CSS 通常可以工作，但运气不好(可能是因为 img 高度设置为“auto”？)。谁能告诉我如何纠正这个问题？

.background-image {
  height: auto;
  width: 100%;
  display: table;
}

#fold-container {
  display: table-cell;
  vertical-align: middle;
}

  #fold-text {
    font-size: 1.6em;
    font-weight: bold;
    background-color: rgba(black, 0.3);
    color: white;
    display: table-cell;
  }

  .fa.fa-chevron-down {
    z-index: 500;
    color:white;
    text-align: center;
    font-size: 2em;
    font-weight: normal;
    display: table-cell;
}

Answer 1

您想要的标记:

<div class="row">
  <img class="background-image" src="images/1400px_splash.jpeg">
    <div id="fold-container">
      <div id="fold-text">
        Sign up to learn about upcoming changes!
      </div>
      <div class="fa fa-chevron-down"></div>
    </div>
  </img>
</div>

... 不是有效的 HTML。 <img>标签不包含任何其他标记，因此浏览器看到的更像是这样:

<div class="row">
  <!-- note the self closing img tag -->
  <img class="background-image" src="images/1400px_splash.jpeg"/>
  <div id="fold-container">
    <div id="fold-text">
      Sign up to learn about upcoming changes!
    </div>
    <div class="fa fa-chevron-down"></div>
  </div>
  <!-- </img> don't know what to do with this, because img tags close themselves -->
</div>

你需要做的更像这样:

<div class="row">
  <div id="fold-container">
    <div id="fold-text">
      Sign up to learn about upcoming changes!
    </div>
    <div class="fa fa-chevron-down"></div>
    <img class="background-image" src="images/1400px_splash.jpeg"/>
  </div>
</div>

...并确保将适当的样式添加到您的元素以适本地定位它们。