Improve this CSS3 and achieve same effect - flexbox vertical align text - css

Question

I am trying to create a vertical nav menu using some of the new css3 techniques but so far I can only get closest to the desired look with display:table . I do not like using display:table/table-row/table-cell primarily because they limit the "cells" to table form (for example you can't space the "rows" or "cells" with margins) and I also don't like the extra divs that only serve to make the list vertical. The reason I went this direction originally was to use vertical-align: middle for the text. When I tried using flex box methods it kept putting both lines of text on the same line and I could not figure out how to split them.
Can you help me achieve the same look but with more flexibility and preferably no extra divs?
Working example of display: table method (does not appear to be perfectly centered though): http://jsfiddle.net/jKRDQ/
Closest I came using flex box method: http://jsfiddle.net/4wSN5/
Closest without CSS3: http://jsfiddle.net/6gRcp/

Answer 1

Your table method has invalid markup: only li elements can be children of ul or ol elements. If you need that extra div, it has to be inside the li.
Your Flexbox method is missing box-orientation/flex-direction. By defult, it is set to horizontal/row, which is what makes them all appear in a row. The CSS for your li should look like this:
http://jsfiddle.net/4wSN5/1/
#slide-out-menu li {
width: 75px;
height: 75px;
border: 1px solid black;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-flex-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
Alternately, you could have stayed with the horizontal/row orientation and used wrapping, but that would have only worked on browsers that support the standard spec (excluding Firefox with experimental Flexbox support enabled).
You may need to drop the prefixes for Firefox because their implementation is so bad. I only included them because my Sass mixins emit them.
If you're going to use Flexbox, never use the properties from the 2009 spec by themselves. While Opera and Chrome (both under the -webkit- prefix) support both the old and new specs (Opera is unprefixed on the new ones), the old ones will be dropped eventually.