Vertical-align not working with XHTML 1.0 Transiti

2019-02-19 20:40发布

问题:

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"

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

When I do that, the image is centered.

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

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>