An earlier post detailed how we can build a 100% CSS-based tab layout. While pretty cool and somewhat usable it had some flaws.
- Jumps back to the first tab when the mouse pointer leaves the area.
- Depends on exact positioning of the content in relation to the tabs.
- Not touch friendly.
- Not keyboard friendly.
Vertical centering of content is something that took a giant step backwards with the departure from table-based layout. The CSS-property vertical-align is limited and in most cases does nothing more than centering inline content vertically inside its' line.
With one line of content, you can set a large line-height, f.ex. 100px and vertical-align: middle; will center your content vertically within the 100px, but this only works when you have one line.
Another solution can be used if you have content with a known height within a container with known height. A combination of margin and position can vertically center your content. But as said, you need to know the height of both your content and the container outside your content.