Centrare oggetti con i Css

Scritto da Salvatore Laisa il 12 febbraio 2010

I Css sono noti per la loro semplicità e versatilità, tuttavia realizzare alcuni effetti basilari di tipografia non è poi così semplice e intuitivo… ma niente panico, non è nemmeno troppo complesso! Ci soffermeremo ora sulle centrature verticali e orizzontali degli oggetti, vedremo come ottenerle e quali sono i loro vantaggi/svantaggi.

Centrare orizzontalmente il testo all’interno di un oggetto

Partiamo dal caso più semplice. Se abbiamo del testo all’interno di un qualunque oggetto Html (h1, div, p… quello che volete!) possiamo sfruttare una proprietà Css che fa proprio al caso nostro, “text-align” (allineamento testo), che supporta tre valori: left (sinistra), right (destra) e center (centro). Quindi ci basta assegnare al testo questa proprietà e il gioco è fatto!

.centraTesto{
   text-align: center;
}

Centrare verticalmente il testo all’interno di un oggetto

Per effettuare invece una centratura verticale del testo, abbiamo prima bisogno di definire l’altezza (height) dell’oggetto che lo contiene. Poi specificheremo un’altezza di linea (line height) esattamente dello stesso valore.

.boxTestoVerticale{
   height: 70px;
   line-height: 70px;
}

Con questa “tecnica” possiamo centrare verticalmente sia testi sia immagini.

Centrato in verticale

Centrare orizzontalmente un box

Ecco ora la soluzione più richiesta! Come avrete notato, tutte le centrature che eseguiamo tramite i Css modificano la posizione di ciò che è contenuto dentro il nostro oggetto, non dell’oggetto stesso!
In modo predefinito non esiste una proprietà che ci permette di centrare un oggetto Html in una pagina tramite i fogli di stile ma, per ottenere questo risultato, possiamo sfruttare un valore magico della proprietà “margin”:

.centraBox{
   margin:0 auto;
}

Centrato in orizzontale, sia il testo sia il box

Assegnando due valori alla proprietà “margin”, facciamo in modo che il primo venga applicato in verticale (tanto sopra quanto sotto) e il secondo in orizzontale (sia a destra sia a sinistra). Quello che otteniamo in questo modo è che i margini orizzontali del nostro oggetto siano automatici: rimarrà così centrato nella pagina anche in caso di successivi ridimensionamenti!