Come allineamento verticale di un testo?

Question

Come allineare verticalmente il testo in un div galleggiava? Per esempio: ho un contenuto dinamico con altezza fissa. se il contenuto è piccola o grande deve allineare automaticamente in verticale.

Grazie

Answer 1

Le celle della tabella sono la soluzione più semplice.

JavaScript è un'alternativa (misurare la dimensione e la dimensione del testo del div, quindi regolare imbottitura, o lineHeight, o qualsiasi altra cosa).

modifica: O questo impressionante 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>

in mente di fare un post su questo blog per un po ', penso che sia arrivato il momento.

Answer 2

So che questo sta andando a rovinare la mia reputazione, ma ... uso una cella di una tabella. Qualsiasi soluzione CSS cross-browser per l'allineamento verticale sarà due volte più difficile da mantenere, essere ottimisti.

Answer 3

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

Answer 4

Chris Coyier ha scritto un ottimo tutorial proprio su questo: http: // css -tricks.com/vertically-center-multi-lined-text/

ho usato io stesso, e funziona perfettamente.

Answer 5

ho incontrato questo problema prima. Io cito gli esperti in modo da non Fudge questo in su: "... oggetto interno è assolutamente posizionato a metà dell'altezza dell'area. Poi viene spostato fino a metà della sua altezza."

Questo può essere fatto con tutte% anziché pixel esatti, nel caso i dati vengono generati da un database e l'altezza varia con ogni pagina.

Fonte: qui

Demo: collegato nella pagina sopra

Qui va la mia prima risposta ...

Answer 6

Hai provato vertical-align: middle; ?