我想制作一个固定大小的容器，里面有一个图像(大小未知)。然后我想让图像适合容器并在容器中居中(水平和垂直)。我想到的是:
<!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 和 Opera 中是这样。
最佳答案
您可以通过在 img 上设置 .display: block 或 vertical-align: top(或 bottom)来解决该问题
共有三种不同的渲染模式:
- 怪癖模式
- 几乎标准模式
- 标准模式
不同的文档类型会触发不同的渲染模式。请参阅:http://hsivonen.iki.fi/doctype/
在标准模式(具有触发文档类型)下，默认的vertical-align是baseline。
在 Quirks 模式(没有文档类型)下，默认的 vertical-align 为 bottom。
此页面解释得很好:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
关于html - DOCTYPE对CSS有影响吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6650313/