È ansible allineare verticalmente il testo all’interno di un div?

Il codice qui sotto (disponibile anche come demo su JS Fiddle ) non posiziona il testo nel mezzo, come preferirei che fosse. Non riesco a trovare alcun modo per centrare verticalmente il testo in un div, anche usando l’attributo margin-top . Come posso fare questo?

 
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; } 

Crea un contenitore per il tuo contenuto di testo, forse un span .

 #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 ha ragione. Nel caso qualcuno manchi il suo commento …

A.) Se hai solo una riga di testo:

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

Aggiornamento 10 aprile 2016

Le Flexbox dovrebbero ora essere utilizzate per allineare gli oggetti verticalmente (o anche orizzontalmente).

 
Item
Item
Item
Item

Una buona guida alla flexbox può essere letta su CSS Tricks . Grazie Ben (dai commenti) per aver segnalato, non ho avuto il tempo di aggiornare.


Un bravo ragazzo di nome Mahendra ha pubblicato una soluzione molto efficace qui

La seguente class dovrebbe rendere l’elemento centrato orizzontalmente e verticalmente rispetto al suo genitore.

 .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; } 

Questa è una vecchia domanda, ma la risposta accettata non funziona per il testo su più righe. Ho aggiornato il JSfiddle per mostrare l’allineamento verticale del testo multilinea css come spiegato qui :

 
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; }

Funziona anche con
in “ancora un altro …”

Prova questo:

HTML

 
Text

CSS

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

Questo dovrebbe semplicemente funzionare:

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

Provato sul tuo demo.

Per rendere la soluzione di Omar (o Mahendra) ancora più universale, il blocco di codice relativo a FireFox dovrebbe essere sostituito dal seguente:

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

Il problema con il codice di Omar, altrimenti operativo, sorge quando vuoi centrare la scatola sullo schermo o nel suo antenato immediato. Questo centramento è fatto sia impostando la sua posizione a

position: relative; o position:static; (non con posizione: assoluta o fissa).

e poi margine: auto; o margin-right: auto; margin-left: auto;

Sotto questo ambiente di allineamento al centro della casella, il suggerimento di Omar non funziona. Non funziona neanche in IE8 (ancora una quota di mercato del 7,7%). Quindi per IE8 (e altri browser), si dovrebbe prendere in considerazione una soluzione alternativa, come si vede in altre soluzioni precedenti.

Questo è il modo più semplice per farlo se hai bisogno di più linee. Avvolgi il testo in un’altra span e specifica la sua altezza con l’altezza della line-height . Il trucco per linee multiple sta ripristinando l’ line-height dell’intervallo interno.

 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

Ovviamente l’estensione esterna potrebbe essere un div o whathaveyou

Aggiungi un allineamento verticale anche al contenuto della #column-content strong css:

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

Vedi anche il tuo esempio aggiornato .

=== AGGIORNAMENTO ===

Con uno span intorno all’altro testo e un altro allineamento verticale:

html:

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

css:

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

Vedi anche il prossimo esempio .

So che è totalmente stupido e normalmente non dovresti usare le tabelle quando non crei le tabelle, ma: Le celle della tabella possono allineare più righe di testo verticalmente centrate e farlo anche di default. Quindi una soluzione che funziona abbastanza bene potrebbe essere qualcosa del genere:

html:

 
lorem ipsum ...

css: (fai in modo che l’elemento tabella si adatti sempre al riquadro div)

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

vedere qui: http://www.cssdesk.com/LzpeV