Question

我想制作一个固定大小的容器，里面会有一个图像（大小未知）。然后我想让图像适合容器并在其中居中（水平和垂直）。我想出的是：

<!DOCTYPE html>
<html>
  <body>
    <div style="width: 500px; height: 375px; display: table-cell;
                vertical-align: middle">
      <img src="./Slideshow_files/Charles Bridge In Prague.jpg"
           style="max-width: 500px; max-height: 375px">
    </div>
  </body>
</html>

对于某些图像，它可以正常工作。但是this one（正好是500x375的大小）使得外部div的高度比底部的375px高几个像素（Chrome中为5px，Opera中为4px）。为什么？??

编辑：刚刚添加了演示here（另有一个display: table-row和display: table元素，here）。在这两种情况下，红色背景都不应该是可见的;在Chrome＆amp;歌剧是。

Answer 1

您可以通过在display: block上设置vertical-align: top或bottom（或img）来解决问题。

有三种不同的渲染模式：

怪癖模式
几乎标准模式
标准模式

不同的doctypes会触发不同的渲染模式。请参阅：http://hsivonen.iki.fi/doctype/

在标准模式下（带有触发的doctype），默认vertical-align为baseline。

在Quirks模式下（没有doctype），默认vertical-align为bottom。

此页面解释得很好：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

DOCTYPE对CSS有影响吗？

1 个答案:

DOCTYPE对CSS​​有影响吗？

1 个答案:

DOCTYPE对CSS有影响吗？