Double-tagging, or CSS vertical align
I’ve tried several ways of doing this, and wanted to post what I’ve found to be the best. And based on testing, it’s also the most cross-browser compliant solution.
The issue is (seemingly) simple. How do you use the equivalent of valign=”middle” in CSS? With tables this was pretty simple. But we’ve all moved on from tables for layout. I hope.
While CSS (including CSS3) does have a vertical-align, you can’t use it in the same way for you text-align for example. You can’t simply tell it that all text within a container should sit halfway down the div.
The way I’ve found most useful is to double-tag. That is, to use a parent div, and then a child within it.
Here’s the code to show what I mean:
#content1 { display:table; height:400px; } #content2 { display:table-cell; vertical-align:middle; } And then when writing the HTML: <div id="content1"> <div id="content2"> This text will sit halfway down the div, regardless of whether I have one line of text, or three. </div> </div>
In essence the first div says “Go on, act like I’m a table”. And then second continues, “And let’s just say I’m a table cell. Because cells *can* have vertical-align assigned to them!”
Double-tagging.
Reply