Come allineare il testo al centro di un elemento con CSS in Twitter Bootstrap?

Question

Sto usando Bootstrap avvisi e questo è il mio successo messaggio di avviso:

<div class="alert alert-success" id="UploadSuccess"> 
    <a class="close" data-dismiss="alert">×</a> 
    <strong>Congrats!</strong> You have successfully did it!. 
</div> 

e il risultato è:

Come si può vedere che l'allineamento del testo è al top di <div>. Quindi, come lo avrei allineato al centro?

Ho provato a utilizzare padding-top e vertical-align:middle ma non funziona (mi ritrovo con lo stesso risultato).

Cosa devo fare per modificare l'allineamento verticale del testo?

Answer 1

Fai il line-height del div lo stesso del height del div, ad esempio:

#UploadSuccess { height: 20px; line-height: 20px; } 

Questo funziona solo se si dispone di una linea di testo.

Answer 2

Cercare di centrare verticalmente il testo è un problema comune. Normalmente questo non avrebbe funzionato su scatole normali, ma si può costringerlo a lavorare con allineamento verticale:

vertical-align: middle; 
display: table-cell; 

Tuttavia, questo non funziona in IE7 e inferiore.

Se sei sicuro che il testo che si desidera visualizzare è possibile utilizzare line-height di falsificare l'effetto come questo:

height: 40px; 
line-height: 40px; /* same as height */ 

In questo modo funziona cross browser e ha il supporto fino a IE5.5 credo. Se questa non è un'opzione, temo che tu non abbia fortuna (non si può fare).

Come nota a margine che il messaggio di errore presenta una grammatica errata, dovrebbe essere "Congratulazioni! L'hai eseguito correttamente.".

Answer 3

Rendilo più facile;)! Prova ad usare il blocco degli avvisi! Funziona bene con l'ultima versione di Bootstrap!

<div class="alert alert-block alert-success" id="UploadSuccess"> 
    <a class="close" data-dismiss="alert">×</a> 
    <strong>Congrats!</strong> You have successfully did it!. 
</div>