Chi sono Quello che devi sapere su di me

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.

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:

See the Pen Come centrare un div all’interno di un altro div by Alberto Firenzuola (@AlbertoFirenzuola) on CodePen.0

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 per due il risultato.

In questo caso:
400 px – 200 px = 200 pixel (400 px è l’altezza del #box-genitore, 200 px è l’altezza del #box-figlio).
200 px / 2 = 100 px (Il risultato della differenza va diviso per due, quello che otterremo sarà il “top” del #box-figlio).

Di conseguenza 100 pixel è la distanza dell’ angolo superiore sinistro del contenuto dal lato superiore del contenitore (top:100px;).
Questi calcoli posso essere applicati anche per quando riguarda la larghezza e la distanza dal lato sinistro.

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

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:

See the Pen COME CENTRARE VERTICALMENTE E ORIZZONTALMENTE UN DIV CON I CSS by Alberto Firenzuola (@AlbertoFirenzuola) on CodePen.0

Non conoscendo le dimensioni della finestra del browser (dell’intera pagina html), diamo un posizionamento assoluto con left e top pari al 50% dello spazio che ha a disposizione l’elemento da posizionare centralmente. Dichiareremo, poi, i margini negativi (top e left) pari alla metà della larghezza e dell’ altezza del box.

In questo esempio, avendo una larghezza (width) di 350px, il margin-left dovrà essere pari alla sua metà, esattamente 250px, poi bisognerà porlo negativo. Quindi con un margin-left pari a -250px.

Mentre per quanto riguarda all’altezza (height) di 200px, il margin-top dovrà essere pari alla sua metà, esattamente 100px, poi bisognerà porlo negativo. Quindi con un margin-top pari a -100px.

L’utilizzo dei margini negativi è dovuto al fatto che, utilizzando dei margini positivi, il #container si sarebbe spostato verso destra nella parte bassa del browser.

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

Blog Gli ultimi articoli

4 febbraio 2017

Alberto Firenzuola

Come creare un sito web WordPress su Altervista.


27 gennaio 2017

Alberto Firenzuola

Come comprare un dominio di primo livello su TOPHOST.IT


25 gennaio 2017

Alberto Firenzuola

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


25 gennaio 2017

Alberto Firenzuola

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


Corsi Alcuni corsi disponibili

WordPress Avanzato


Durata corso: 10 ore

SASS


Durata corso: 4 ore

Contattami Hai bisogno di aiuto? Sarò lieto di aiutarti

∗ Tutti i campi sono obbligatori.

Crea il tuo sito web e proponi il tuo business