【发布时间】：2011-07-27 06:54:09
【问题描述】：
好的，所以我搞砸了很长时间，试图使用 vertical-align:middle 将图像垂直居中在 div 中（同时还使用 text-align:center 将其水平居中），我绞尽脑汁想弄清楚找出为什么它不起作用。
.container{
height:200px;
width:200px;
text-align:center;
line-height:200px;
}
.image{
vertical-align:middle;
}
在我看来应该如此，但事实并非如此，事实证明解决它的方法是更改文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
到
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
当我这样做时，图像居中。
怎么会？我的印象是，严格的文档类型允许的属性比过渡的少，这是错误的吗？我似乎找不到任何关于vertical-align 和XHTML 1.0 Transitional 的信息，但说到Strict，我发现所有关于它的信息都不允许这个和那个，所以我有点困惑。对于这个特定的网站，我宁愿不使用 Strict，但我确实需要使用 vertical-align。
有人可以解释一下吗？谢谢
【问题讨论】：
-
你在哪些浏览器上试过这个？您在文档类型之前是否在文档中添加了其他内容（例如
<?xml声明）？ doctype 之前的任何内容都会触发浏览器的怪癖模式，这简直就是地狱。另外，您可以与图像共享html代码片段吗？此外，您将获得什么以及您想要获得什么的屏幕截图会有所帮助（vertical-align 是一个非常晦涩的属性，其工作方式与大多数人的预期不同）。 -
@herenvardo - 文档类型之前的任何内容都只会触发 IE 中的怪癖，而不是现代浏览器。现代浏览器也知道如何处理您提到的 XML 声明。 IE 没有。
-
@Rob：更糟糕的是：不同浏览器上完全不同的模式，而不仅仅是不同的怪癖？如果您仍然打算破解 IE，它可能会这样做，但不是非常可取。尽管如此，确切地了解 OP 试图实现的目标以及它在哪个浏览器/s 上失败还是非常有用的。再看一遍，引号中缺少了一大块 doctype：如果问题出在那个块中，我们将无法指出。
-
@Herman：另一个想法：Strict doctypes 禁用的内容已被弃用，无论如何都被认为是不好的做法；因此，如果您的网站可以使用它们，那么就没有理由坚持使用过渡。 Transitional 旨在简化过渡（从 3.2 insane tag-soup 开始），Strict 更像是“现代 HTML 应该做的”，忽略了 target 属性（这在具有 iframe 的页面上非常有价值，但 Strict 没有允许）。
-
@herenvardo - 我已经在 Chrome、Firefox、Safari、Opera 和 Explorer 中尝试过，所有这些都发生了同样的事情。我试图通过创建一个新文档来隔离问题，因此 HTML 非常简单
<div class="container"> <img class="image" src="image.png"/> </div>CSS 是您在我的第一篇文章中看到的，两个文件之间的唯一区别是 doctype。
标签： css image doctype vertical-alignment