Wie man vertikal ausrichten einen Text?

StackOverflow https://stackoverflow.com/questions/1101827

  •  12-09-2019
  •  | 
  •  

Frage

Wie vertikal den Text in einem schwebenden div align? Zum Beispiel: Ich habe einen dynamischen Inhalt mit fester Höhe. wenn der Inhalt klein oder groß ist es automatisch vertikal ausrichten muss.

Danke

War es hilfreich?

Lösung

Tabellenzellen sind die einfachste Lösung.

Javascript ist eine Alternative (messen Sie die Größe und die Textgröße des div, dann justiert Polsterung oder Lineheight, oder was auch immer).

edit: Oder dieses ehrfürchtige 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>

die Bedeutung gewesen eine Blog-Post über diesen für eine Weile zu machen, ich denke, es ist Zeit.

Andere Tipps

Ich weiß, das meinen Ruf ruinieren wird, aber ... verwenden, um eine Tabellenzelle. All Cross-Browser CSS-Lösung für vertikale Ausrichtung wird doppelt so schwer zu halten, ist optimistisch. 

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

Chris Coyier schrieb eine hervorragende Tutorial auf eben diesem: http: // css -tricks.com/vertically-center-multi-lined-text/

Ich habe es selbst verwendet, und es funktioniert perfekt.

Ich habe vor über dieses Problem kommen. Ich werde die Experten zitieren, damit ich das nicht frisieren up: „... internes Objekt absolut in der Hälfte der Fläche Höhe positioniert ist. Dann die Hälfte seiner Höhe nach oben bewegt wird.“

Dies alles kann mit% statt genauer Pixel durchgeführt werden, falls die Daten aus einer Datenbank generieren und die Höhe variiert mit jeder Seite.

Quelle: hier

Demo: verlinkter auf der oben genannten Seite

Hier geht meine erste Antwort ...

Haben Sie vertical-align versucht: Mitte; ?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top