在 100% 宽度的图像顶部垂直对齐两列布局答案

【问题标题】：Vertical align two column layout on top of 100% width image在 100% 宽度的图像顶部垂直对齐两列布局
【发布时间】：2019-04-02 03:02:59
【问题描述】：

我有一个这样的场景，我想要一个宽度为 100% 的图像作为背景。接下来我想在图像中间对齐两列布局文本。我使用显示表格单元格和垂直对齐：中间，它没有按预期工作。

JS fiddle here

预期的结果是两列布局在中间。注意：图片必须作为背景，宽度为 100%，高度根据浏览器宽度缩放。

* {
  margin: 0;
  padding: 0;
}

<div style="position: relative;">
  <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
    <div style="display: table; vertical-align: middle; padding-top: 100px;">
      <div style="display: table-cell; width: 120px;">
        Left Column
      </div>
      <div style="display: table-cell;">
        <p>
          Right Column Top
        </p>
        <p>
          Right Column Bottom
        </p>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您想将表格水平居中还是垂直居中？
@LucaJung 是的，如果你能证明如何同时实现这两个目标，那就太好了
@vincentsty 使用table 和flexbox 显示查看我的解决方案，让我知道您的反馈。谢谢！

标签： html css css-tables

【解决方案1】：

如果flexbox 是一个选项，它可以很容易地删除表格并使用它：

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

请注意，我已删除内联样式并添加到类中以进行说明：

* {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<div style="position: relative;">
  <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
  <div class="container">
    <div class="wrapper">
      <div style="width: 120px;">
        Left Column
      </div>
      <div>
        <p>
          Right Column Top
        </p>
        <p>
          Right Column Bottom
        </p>
      </div>
    </div>
  </div>
</div>

如果你想坚持使用表格，这里是解决方案：

也将height: 100% 添加到table 和vertical-align: middle 到table-cells 以进行垂直对齐。
添加margin: 0 auto 进行水平对齐。

下面的演示：

* {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.wrapper {
  display: table;
  vertical-align: middle;
  height: 100%;
  margin: 0 auto;
}
.wrapper > div {
  display: table-cell;
  vertical-align: middle;
}
.wrapper > div:first-child {
  width: 120px;
}

<div style="position: relative;">
  <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
  <div class="container">
    <div class="wrapper">
      <div>
        Left Column
      </div>
      <div>
        <p>
          Right Column Top
        </p>
        <p>
          Right Column Bottom
        </p>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

像这样？，文本现在也居中了，我删除了 padding-top 使单元格垂直和水平居中：jsfiddle

<div style="position: relative;">
    <img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
        <div style="display: table; vertical-align: middle; width:100%;text-align:center;height:100%">
            <div style="display: table-cell; vertical-align: middle;">
                Left Column
            </div>
            <div style="display: table-cell; vertical-align: middle;">
                <p>
                    Right Column Top
                </p>
                <p>
                    Right Column Bottom
                </p>
            </div>
        </div>
    </div>
</div>

【讨论】：