Centrare elementi con una classe CSS

Spesso capita di dover centrare orizzontalmente degli elementi HTML in un contenitore.
Soprattutto se si tratta di più elementi nello stesso contenitore (o più elementi in contenitori diversi) cosa c’è di meglio che impostare una regola CSS generica che potremo riutilizzare in più punti del nostro codice.

In particolare imposteremo una classe CSS e racchiuderemo tutti gli elementi da centrare in un DIV a cui attribuiremo la nostra classe CSS.

Codice

Ecco la classe da usare nel CSS (notare il punto all’inizio):

.centrato {text-align: center;}

Ed ecco il codice da usare nella pagina HTML con il richiamo alla classe CSS:

<div class="centrato">elemento</div>

Esempio

Ecco un esempio per centrare orizzontalmente un blocco di testo e un’immagine nel contenitore:

<div class="centrato">
   <p>Questo paragrafo è centrato... ma anche l'immagine è centrata</p>
   <img src="..." />
</div>

Ed ecco il risultato:

Questo paragrafo è centrato… ma anche l’immagine è centrata

Chiaramente, modificando l’attributo text-align della nostra classe potremmo allineare anche a sinistra o a destra usando i valori left e right rispettivamente.

Inoltre, se l’elemento da allineare è uno solo, senza doverlo racchiudere in un blocco DIV potremo attribuire la classe all’elemento stesso (paragrafo, immagine, o altro) usando la sintassi:

<p class="centrato">Questo paragrafo è centrato</p>