Vertical-Align Not Working with Xhtml 1.0 Transitional Doctype

XHTML 1.0 Strict - div align=center still working?

Doctype switching triggered Standards Mode has nothing to do with enforcing lack of support for deprecated/removed attributes. Most of the effects it has are on disabling the emulation of bugs (such as incorrect handing of width and assuming integer values are pixel values) in CSS support.

Use a validator to detect when you are using a deprecated HTML feature.

line-height not working after change from XHTML1 Trans to HTML5 doctype

The HTML5 doctype, being the more modern doctype, causes standards mode in browsers. The XHTML 1.0 Transitional doctype causes limited-quirks mode. The behaviour you get with the HTML5 doctype is the correct one, so you are really asking "How do I make line-height behave like it shouldn't?". That's going to be difficult.

Here's a description of the differences in line-height calculations between limited-quirks(aka almost standards) and standards modes: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

You will need to embrace the standards mode behaviour and adjust your layouts accordingly.

Vertical Align working in fiddle, but not in browser

Remove float: left from your .webinar-header-logo style.

There is no need for it, at least in the markup you posted

Vertical align div in XHTML 1.1 for EPUB?

There's another trick you can try.

If you have this structure:

<div class="container">
    <div class="text">
    Some text you need aligned vertically
    </div>
</div>

On the CSS you'd have:

.container {
    height: 50px;
    position: relative;
}

.text {
    position: absolute;
    top: 50%;
}

You can give that a go if you'd like. Change the height to whatever you need it to be of course.

DOCTYPE html PUBLIC DTD XHTML 1.0 Transitional

In Standards Mode, if you want a statically-positioned element to be the same height as the viewport, it and all ancestors (potentially including body and html) have to have a CSS height: 100%. The 100% height is relative to the size of the parent, and if the parent doesn't have an explicit height, percentages are meaningless.

If you want an absolutely-positioned elements to be the same height as the viewport it's the same but with positioned containing blocks instead of every element. This case is usually easier as there may not be any containing blocks between the viewport and the element.

In Quirks mode (which is what you get when you remove the doctype), height: 100% often has a different effect, amongst many typically-less-helpful bugs.

Can't vertically align H1 (prefixed hack not working)

If you want the text vertically centered between the images, a table display would work fine.

Your CSS changes would look something like

#header {
    height: 200px;
    display:table;
}
.DebugBorder{ 
    border: 2px red solid; 
    display:table-cell;
    width:29%;
}

Here's a fiddle using your code: https://jsfiddle.net/dy4nycjk/1/

But if you want the text vertically centered and covering the images, you'll have to do a little more work with positioning.
Here's another fiddle with an example of the text centered over your two images: https://jsfiddle.net/ktLn72yq/

Form element not respecting CSS vertical alignment in Opera

I don't know why, or what's going on, but placing an before <input type="q" .. /> fixes it.

You should wait for a better answer, but if one doesn't arrive, at least this works.

css: vertical and horizontal align, IE

The reason it's not working in IE9/8 is because you are missing your DOCTYPE. It still won't work in IE7, but if you make your span display block and adjust your margins, you can get it to look the same. See my example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'> 
.center{
    background-color: #336699;
    width: 200px;
    height: 200px;
    display: table;
}
.sub{
    display: table-cell ;
    vertical-align: middle;
    text-align: center;
}
</style>
<!--[if IE 7]>
    <style type='text/css'>
        .sub {
        display: block;
        margin: 70px auto;
    </style>    
<![endif]-->
</head>
<body>
<div class="center">
   <span class="sub">
       Some text text...<br />
       An some more text...
   </span>
</div>
</body>

Strange input offset issue with Internet Explorer

This seems weird, but you can try setting vertical-align: top in the CSS for the inputs. That fixes it in IE8, at least.