问题描述
好吧，所以我搞砸了很长一段时间试图在div中垂直居中使用vertical-align：middle（同时也将它水平居中，文本对齐：居中）我正在绞尽脑汁试图想象为什么在世界上它没有工作。
Okay, so I messed around for a long time trying to center an image vertically within a div using vertical-align:middle (while also centering it horizontally with text-align:center) and I was wracking my brains trying to figure out why in the world it wasn't working.
.container{
height:200px;
width:200px;
text-align:center;
line-height:200px;
}
.image{
vertical-align:middle;
}
它看起来像它应该，但它没有，结果解决它的问题是改变文档类型
It looked to me like it should, but it didn't, turns out that the thing that solved it was changing the doctype from
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
当我这样做时，图像居中。
When I do that, the image is centered.
为什么？我的印象是严格的doctype允许的属性少于过渡的属性，是错的吗？我似乎无法找到有关vertical-align和XHTML 1.0 Transitional的任何信息，当谈到Strict时，我发现有关它的所有类型的信息都不允许这样做，所以我有点困惑。我宁愿不在这个特定网站上使用Strict，但我确实需要使用vertical-align。
How come? I was under impression that the strict doctype allows less attributes than the transitional one, is that wrong? I can't seem to find any information regarding vertical-align and XHTML 1.0 Transitional, when it comes to Strict however I find all kinds of information about it not allowing this and that, so I'm a bit confused. I'd rather not use Strict for this particular site, but I do need to use vertical-align.
有人可以对此有所了解吗？谢谢
Can anybody shed some light on this please? Thanks
推荐答案
doctype不影响CSS的作用。但是，您尝试的第二个doctype会触发您不想进入的怪癖模式，因为它使用了错误的盒子模型。新网页也不应该使用过渡性文档类型。始终使用严格或较新的doctype：<！doctype html>
The doctype does not affect what CSS does. However, the second doctype you tried does trigger quirks mode which you don't want to be in because it uses the wrong box model. New web pages should not be using transitional doctypes either. Always use strict or the newer doctype: <!doctype html>
这篇关于Vertical-align不能与XHTML 1.0 Transitional doctype一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！