Ist es möglich, Text in einem Div vertikal auszurichten?

Der Code unten (auch als Demo auf JS Fiddle verfügbar) positioniert den Text nicht in der Mitte, wie ich es am liebsten hätte. Ich kann keine Möglichkeit finden, Text in einem Div vertikal zu zentrieren, selbst wenn das Attribut ” margin-top wird. Wie kann ich das machen?

 
1234 yet another text content that should be centered vertically
 #column-content { display: inline-block; border: 1px solid red; position:relative; } #column-content strong { color: #592102; font-size: 18px; } img { margin-top:-7px; vertical-align: middle; } 

    Erstellen Sie einen Container für Ihren Textinhalt, vielleicht einen Bereich.

     #column-content { display: inline-block; } img { vertical-align: middle; } span { display: inline-block; vertical-align: middle; } /* for visual purposes */ #column-content { border: 1px solid red; position: relative; } 
     
    1234 yet another text content that should be centered vertically

    Andres Ilich hat es richtig gemacht. Für den Fall, dass jemand seinen Kommentar vermisst …

    A.) Wenn Sie nur eine Textzeile haben:

     div { height: 200px; line-height: 200px; /* < -- this is what you must define */ } 
     
    vertically centered text

    Update 10. April 2016

    Flexboxen sollten jetzt verwendet werden, um Objekte vertikal (oder sogar horizontal) auszurichten.

     
    Item
    Item
    Item
    Item

    Ein guter Leitfaden für die flexbox ist in CSS Tricks zu finden . Danke Ben (aus den Kommentaren) für den Hinweis, hatte keine Zeit zu aktualisieren.


    Ein guter Typ namens Mahendra hat hier eine sehr funktionierende Lösung veröffentlicht

    Die folgende class sollte das Element horizontal und vertikal zum übergeordneten Element zentrieren.

     .absolute-center { /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } 

    Dies ist eine alte Frage, aber die angenommene Antwort funktioniert nicht für mehrzeiligen Text. Ich habe das JSfiddle so aktualisiert , dass css mehrzeiliger vertikaler Text angezeigt wird , wie hier erklärt:

     
    yet another text content that should be centered vertically
    #column-content { border: 1px solid red; height: 200px; width: 100px; } div { display: table-cell; vertical-align:middle; text-align: center; }

    Es funktioniert auch mit
    in “noch einem …”

    Versuche dies:

    HTML

     
    Text

    CSS

     div { height: 100px; } span { height: 100px; display: table-cell; vertical-align: middle; } 

    Das soll einfach funktionieren:

     #column-content { -------- margin-top:auto; margin-bottom:auto; } 

    Ich habe es auf deiner Demo versucht.

    Um Omars (oder Mahendra’s) Lösung noch universeller zu machen, sollte der Code-Block relativ zu FireFox wie folgt ersetzt werden:

     /* Firefox */ display:flex; justify-content:center; align-items:center; 

    Das Problem mit Omars Code, sonst operativ, entsteht, wenn Sie die Box auf dem Bildschirm oder in ihrem unmittelbaren Vorfahren zentrieren wollen. Diese Zentrierung erfolgt entweder durch Einstellen der Position auf

    position: relative; oder position:static; (nicht mit Position: absolut oder fest).

    und dann margin: auto; oder Rand rechts: Auto; Rand links: Auto;

    Unter dieser Umgebung zum Ausrichten der Schachtelmitte funktioniert Omars Vorschlag nicht. functioniert nicht in IE8 (noch 7,7% Marktanteil). Daher sollte für IE8 (und andere Browser) eine Problemumgehung wie in anderen oben genannten Lösungen in Betracht gezogen werden.

    Dies ist der einfachste Weg, wenn Sie mehrere Zeilen benötigen. Wickeln Sie den Text in eine andere span und geben Sie die Höhe mit line-height . Der Trick zu mehreren Linien ist das Zurücksetzen der Linienhöhe der inneren span .

     YOUR TEXT HERE 
     .textvalignmiddle { line-height: /*set height*/; } .textvalignmiddle > span { display: inline-block; vertical-align: middle; line-height: 1em; /*set line height back to normal*/ } 

    DEMO

    Natürlich könnte die äußere span ein div oder washaveyou sein

    Fügen Sie dem css #column-content strong eine vertikale Ausrichtung hinzu:

     #column-content strong { ... vertical-align: middle; } 

    Siehe auch Ihr aktuelles Beispiel .

    === UPDATE ===

    Mit einer Spanne um den anderen Text und einer anderen vertikalen Ausrichtung:

    html:

     ... yet another text content that should be centered vertically ... 

    CSS:

     #column-content span { vertical-align: middle; } 

    Siehe auch das nächste Beispiel .

    Ich weiß, dass es total blöd ist und Sie sollten normalerweise keine Tabellen verwenden, wenn Sie keine Tabellen erstellen, sondern: Tabellenzellen können mehrere Textzeilen vertikal zentrieren und dies auch standardmäßig tun. Eine Lösung, die ganz gut funktioniert, könnte etwa so aussehen:

    html:

     
    lorem ipsum ...

    css: (mach das Tabellenelement immer passend zur Box div)

     .box { /* for example */ height: 300px; } .textalignmiddle { width: 100%; height: 100%; } 

    siehe hier: http://www.cssdesk.com/LzpeV