If you are like me there's been a time when you have wanted to use the CSS vertical-align property to align some page content vertically in the middle of a div tag or some other block type HTML element besides a <table> only to find out unfortunately that this is just not possible. Or is it? Well, the answer is sort of.
There is a creative CSS method that can actually center a single line of text in the milddle of an HTML element if you know the height of that element or the height that you would like the element to be. Many Web designers today are using the CSS property line-height to provide that vertical alignment.
For example, let's say we would like a box to be 100 pixels tall and the text vertically centered in the middle. We could accomplish this by doing the following:
<style text/css>
#VerticalAlign
{
line-height: 100px;
color: Yellow;
text-align: center;
background-color: #000;
}
</style>
The rendering of this code would look like this:
Vertically Aligned Text Here
And there you have it, a partial method to align things outside of a table vertically in the middle with CSS.