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

25 Gennaio 2017

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:

See the Pen NdvJBg by Alberto Firenzuola (@AlbertoFirenzuola) on CodePen.0

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.

Articoli Correlati Ti potrebbe interessare anche

25 Gennaio 2017
  • Facile
  • Medio
  • Difficile
Articolo

Come centrare un div all’interno di un altro div con il posizionamento assolto con il css.

A volte ci capita di voler centrare un div più piccolo all’interno di un div più grande. Per fare ciò utilizzeremo il posizionamento assoluto. Ecco il codice: Come si può vedere dall’esempio, per avere un elemento centrato verticalmente, dobbiamo fare la differenza tra l’altezza del div genitore (#box-genitore) con l’altezza del div figlio (#box-figlio), e successivamente dividere […]

23 Gennaio 2017
  • Facile
  • Medio
  • Difficile
Articolo

Come centrare verticalmente ed orizzontalmente un div all’interno di una pagina con il css.

A volte ci capita di voler centrare un elemento verticalmente e orizzontalmente rispetto a una pagina html, pur non sapendo le sue dimensioni. Al giorno d’oggi l’utente potrebbe avere una risoluzione di schermo diversa, in base al dispositivo utilizzato. In questo caso utilizzeremo il posizionamento assoluto e i margini negativi. Ecco il codice: Non conoscendo le dimensioni della […]

Crea il tuo sito web e proponi il tuo business