HTML5 and vertical-align? Fixed now?

Question

I come from the world, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it's really ugly.

Is there an easier way now with HTML5? Is there some sort of implementation that uses something like the HBox/VBox mentality? I saw there are examples for non-ie browsers -- is there a compliant way?

How the heck does anyone in their right mind do HTML now? It's a mess!

//// EDIT

I have a simple layout here: http://www.danielhai.com/overflow/inline.html

I've finally figured out how to vertically align an entire box over a screen, how I'm figuring out how to vertically center list items.

I've tried two methods to align this html:

<nav>
    <ul>
        <li><a href="#!/home">Home</a></li>
        <li><a href="#!/link1">Link #1</a></li>
    </ul>
</nav>

one using display:inline, the other using float:left (within a container). When using inline, it seems the list items ignore the height: css, and when using float:, the links within the li do not vertically align. Do I need to place div's within the li's to get them to vertically center as well?

Here are the test cases:

http://www.danielhai.com/overflow/inline.html http://www.danielhai.com/overflow/float.html

Answer 1

HTML5 really doesn't have anything to do with element layout, such as vertically aligning content. As before, the markup is styled by CSS.

CSS is a totally different spec from HTML5, so no, nothing has changed.

---

If you're having trouble implementing a specific layout, then ask a specific question, and we can probably help out.