Realizato da

Pubblicato il

modi

diversi

centrare

elementi

css

center


Oggi vi mostrerò 3 metodi semplici per centrare elementi HTML usando il CSS, tutti questi metodi illustrati funzionano benissimo anche per il responsive design.
Cominciamo dal metodo più semplice:

Centrare usando text-align:

.container{
    text-align: center;
}
.elemento{
    display: inline-block;
}

Con questo metodo abbiamo bisogno di avere l’'elemento da centrare inserito in un container con la proprietà  text-align: center .
Gli elementi “figlio” del container verranno centrati automaticamente, a patto che questi non siano in modalità  display: block 

Centrare usando margin:

.elemento{
    margin: 0 auto;
}

La proprietà  margin: auto , inserisce il massimo margin disponibile ai bordi dell’'elemento selezionato. Usando  margin: 0 auto , assegniamo un margin nullo sopra e sotto l’'elemento, ed un margin massimo a destra e sinistra. Questo forza l’'elemento a rimanere centrato (anche negli schermi più piccoli).

Centrare usando position

.container{
    position: relative;
}
.elemento{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Per questo metodo avrai bisogno di avere un container con posizione relative, in modo da posizionare l’'elemento “figlio”, relativo al container.
Questo metodo é molto efficace per il responsive design. Funziona spostando l'elemento al centro del container per  poi tirarlo indietro di una distanza uguale alla meta della sua larghezza.

Grazie per aver seguito questa guida, se l'hai trovata interessante ti prego di condividerla con chi ne ha bisogno, o di condividerla su Facebook.
Puoi anche inscriverti alla Newsletter nel footer, per rimanere aggiornato sulle ultime guide di devnews.it
Grazie:)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)