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

标签 html css css3 css-tables

我有一个这样的场景,我想要一个宽度为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>





enter image description here

最佳答案

如果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-cell进行垂直对齐。
添加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>

关于html - 在100%宽度图像的顶部垂直对齐两列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40127411/

相关文章:

css - 在哪里可以找到开源CSS动画

javascript - 如何将多维数组映射到HTML canvas中的矩形网格?

html - 带有 Today 和 DateFormat 的 DatePicker

javascript - jQuery 下拉建议

css - 溢出x : visible; overflow-y: auto; does not work - is this standards compliant?

javascript - 无法使用jQuery显示选项卡内容

javascript - 如何使用for循环在div中显示restful api获取的数据?

java - 无法确定格式不正确的原因

html - 如何阻止div移动其他div

css - CSS3 PIE在IE8中无法正常工作