在100%宽度图像

时间:2016-10-19 09:29:30

标签: 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>
&#13;
&#13;
&#13;

enter image description here

2 个答案:

答案 0 :(得分: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>

如果你想坚持使用表格,这就是解决方案:

  1. height: 100%添加到tablevertical-align: middle也添加到table-cell以进行垂直对齐。

  2. 添加margin: 0 auto进行水平对齐。

  3. 演示如下:

    * {
      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>

答案 1 :(得分:0)

像这样?,文本现在也居中,我删除了填充顶部,使单元格在垂直和水平方向都居中: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>