Question

好吧，所以我搞砸了很长一段时间试图在div中垂直居中使用vertical-align：middle（同时也将它水平居中，文本对齐：居中）我正在绞尽脑汁试图想象为什么在世界上它不起作用。

.container{
    height:200px;
    width:200px;
    text-align:center;
    line-height:200px;
    }

    .image{
    vertical-align:middle;
    }

在我看来它应该是，但事实并非如此，事实证明解决它的问题是改变了doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

到

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

当我这样做时，图像居中。

为什么？我的印象是严格的doctype允许的属性少于过渡的属性，是错的吗？我似乎无法找到有关vertical-align和XHTML 1.0 Transitional的任何信息，当谈到Strict时，我发现有关它的所有类型的信息都不允许这样，所以我有点困惑。我宁愿不在这个特定网站上使用Strict，但我确实需要使用vertical-align。

有人可以对此有所了解吗？感谢

Answer 1

doctype不影响CSS的功能。但是，您尝试的第二个doctype会触发您不想进入的怪癖模式，因为它使用了错误的盒子模型。新网页也不应该使用过渡性文档类型。始终使用严格或较新的doctype：<!doctype html>

Vertical-align不能与XHTML 1.0 Transitional doctype一起使用？

1 个答案: