Come centrare una riga di testo in un div con il css.

Spesso ci capita di voler centrare una riga di testo verticalmente in un div. Per ottenere questo risultato utilizzeremo il selettore line-height. 

Vediamo il codice d’esempio:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”NdvJBg” default_tab=”css,result” user=”AlbertoFirenzuola”]See the Pen <a href=’http://codepen.io/AlbertoFirenzuola/pen/NdvJBg/’>NdvJBg</a> by Alberto Firenzuola (<a href=’http://codepen.io/AlbertoFirenzuola’>@AlbertoFirenzuola</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Come si può notare dal codice d’esempio, per allineare verticalmente un testo in un box con delle dimensioni prestabilite, bisogna settare il valore di line-height uguale all’altezza (height) del box contenitore.

Per centrare orizzontalmente il testo si deve aggiungere text-align: center  all’identificatore della scritta.

Per vedere il risultato finale e suggerimenti più dettagliati vi invito a guardare il video tutorial.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *