How to vertical align a text?

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

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 know this is going to ruin my reputation, but ... use a table cell. Any cross-browser CSS solution for vertical alignment will be twice as difficult to maintain, being optimistic.

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>

Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/

I've used it myself, and it works perfectly.

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

Demo: linked on the above page

Here goes my first answer...

Have you tried vertical-align: middle; ?

来源：https://stackoverflow.com/questions/1101827/how-to-vertical-align-a-text

标签

css

html

vertical-alignment