1

我正在创建一个图像库，其中图像在整个页面中居中。水平部分当然容易，但垂直部分就麻烦了。

我熟悉使用display: table-cell;and vertical-align: middle;（或 using line-height，但在使用它们以及试图让元素填充页面时没有成功。

<div id='contain'>
   <img src='url' />
</div>

我无法设置 line-height ，#contain因为容器的高度会根据窗口的大小而变化。

如果我绝对定位#contain，则应用vertical-align:middle不再垂直居中图像，无论我如何设置框的大小。

如果我尝试#contain在没有绝对定位的情况下调整大小以填充窗口，width: 100%并且height: 100%（或使用最小宽度/最小高度）不填充页面。同样，我无法指定确切的值，因为它们会有所不同。

我知道我总是可以将图像设置为背景#contain（或使用 JavaScript 来计算高度），但如果有一种 CSS/HTML 方法可以在没有表格的情况下解决这个问题，我更愿意使用它。

4

1 回答 1

1

尝试将您的 img 包装在一个额外的 div 中，然后使用以下 css：

#contain {
  display: table;
  width: 100%;
  height: 100%;
}
#contain div {
  display: table-cell;
  vertical-align: middle;
}

HTML：

<div id='contain'>
   <div><img src='url' /></div>
</div>
于 2012-07-02T20:02:45.267 回答