title: Improve this CSS3 and achieve same effect - flexbox vertical align text
body: <p>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 <code>display:table</code> . I do not like using <code>display:table/table-row/table-cell</code> 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 <code>divs</code> that only serve to make the list vertical. The reason I went this direction originally was to use <code>vertical-align: middle</code> 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.</p>
  
  <p>Can you help me achieve the same look but with more flexibility and preferably no extra divs?</p>
  
  <p>Working example of <code>display: table</code> method (does not appear to be perfectly centered though): <a href="http://jsfiddle.net/jKRDQ/" rel="nofollow">http://jsfiddle.net/jKRDQ/</a></p>
  
  <p>Closest I came using flex box method: <a href="http://jsfiddle.net/4wSN5/" rel="nofollow">http://jsfiddle.net/4wSN5/</a></p>
  
  <p>Closest without CSS3: <a href="http://jsfiddle.net/6gRcp/" rel="nofollow">http://jsfiddle.net/6gRcp/</a></p>