Question: How to vertically align the text in a floated div? For example: I have a dynamic content with fixed height. if the content is small or big it has to automatically vertically align.

Thanks

Answer: 
Table cells are the easiest solution.

Javascript is an alternative (measure the size and text size of the div, then adjust padding, or lineheight, or whatever).

edit: Or this awesome css:

CSS

```
div#container {
    border: solid 1px;
    height: 300px;
}

div#content {
    border: solid 1px;
}

div#balance {
    border: solid 1px;
    /* gotta be 100% */
    height: 100%;
}

div.valign {
    /* firefox 2 */
    display: -moz-inline-box;
    /* everybody else */
    display: inline-block;

    vertical-align: middle;
}

/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

```

HTML

```
<div id="container">
    <div id="balance" class="valign"></div>
    <div id="content" class="valign">
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah
    </div>
</div>

```

Been meaning to make a blog post about this for a while, I think it's time.
I've come across this problem before.
I'll quote the experts so I don't fudge this up:
*"...internal object is absolutely positioned in half of the area height. Then is moved up by half of its height."*

This can be all done with % instead of exact pixels, in case the data is generated from a database and the height varies with each page.

Source: [here](http://www.jakpsatweb.cz/css/css-vertical-center-solution.html "here")

Demo: linked on the above page

*Here goes my first answer...*