Prima o poi capiterà a tutti: centrare orizzontalmente un div che si trova all’interno di un altro div. Come si fa?
Mi trovo davanti alla necessità di centrare orizzontalmente un <div> che si trova all’interno di un altro <div> e lo devo fare usando CSS. È possibile?
La situazione è la seguente (il <div> interno deve trovarsi al centro di quello esterno):
<div id="outer"> <div id="inner">Mio testo</div> </div>
Soluzione
Questo è un problema tipico con cui prima o poi ci si scontra. Ci sono diversi metodi che si possono utilizzare per ottenere il risultato. Qui ne viene proposto uno, forse il più utilizzato: il segreto è tutto nel seguente codice CSS margin: 0 auto;
Nell’esempio che segue viene impostata la larghezza massima del <div> interno al 50% rispetto a quella del <div> esterno (width: 50%;). Inoltre gli viene colorato lo sfondo di giallo per meglio mostrare il risultato (background-color: yellow;). Infine viene anche centrato il testo contenuto nel <div> interno (text-align: center;). Puoi cliccare sui link HTML, CSS e Result per vedere i codici e il relativo risultato in tempo reale 🙂