I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.
Vertical Centering in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Article summary:
For a CSS 2 browser, one can use display:table
/display:table-cell
to center content.
A sample is also available at JSFiddle:
div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>
It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using #
to hide styles from newer browsers:
div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=
"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
everything is vertically centered
</div>
</div>
</div>