Come centrare verticalmente un testo o una immagine.

Come centrare orizzontalmente e verticalmente immagini, testo e widget con l'uso del CSS.

Ho appena letto una email che ho ricevuto con il modulo di contatto. Chi segue questo blog sa che non amo ricevere richieste tramite email e preferisco che questa opzione di interazione sia usata solo per questioni che non possono essere rese pubbliche per questioni di riservatezza. In genere a questi messaggi non rispondo ma stavolta mi è stato posto un quesito che forse potrebbe interessare anche altri lettori.

La domanda era come si faceva a "allineare testi, foto, ecc in altezza e in larghezza in modo che i punti centrali degli stessi fossero allineati". Si tratta di un quesito generale a cui non si può rispondere in modo esauriente ma si possono però fare degli esempi che potrebbero presentarsi nella pratica del blogging.

COME CENTRARE AUTOMATICAMENTE DELLE IMMAGINI

Per centrare una immagine si può pensare di creare un CSS specifico da utilizzare tutte le volte che serve, e quindi inserirlo nel template, oppure usare questo CSS inline

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/400/200"/>

in cui si deve ovviamente sostituire l'URL dell'immagine

IMMAGINI IN VERTICALE CON IL CENTRO ALLINEATO

Se ho capito bene la domanda che mi è stata fatta per avere tre o più immagini tutte con lo stesso punto centrale allineato possiamo dividere i codici delle immagini con uno o più salti di riga <br/>

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/200/100"/>
<br/>
<br/>
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/150/100"/>
<br/>
<br/>
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/300/100"/>

con questo risultato



Come test ho utilizzato gli URL delle immagini generiche offerte dal servizio Lorempixel.

CENTRARE VERTICALMENTE UN TESTO

Centrare orizzontalmente un elemento è intuitivo visto che significa posizionarlo nel layout alla stessa distanza dalla parte destra e sinistra. Il centramento verticale presuppone invece che ci sia un contenitore esterno in cui inserire una immagine o un testo alla stessa distanza dalla parte alta e dalla parte bassa. Le istruzioni forniteci dal W3C sul tag vertical-align sono utili allineare per esempio un testo a delle immagini che siano state inserite nello stesso contenitore ma non sono molto pratiche per esempio per centrare un testo sia orizzontalmente sia verticalmente in un box.

Facciamo l'esempio di un rettangolo da porre nel nostro blog in cui avvertiamo che siamo disponibili a vendere quello spazio pubblicitario con relativo annuncio. Il codice da usare per incollare in un widget HTML/Javascript in questo caso potrebbe essere il seguente

<div style="width:250; height:150; color:#f33; background:#fbf; text-align: center; line-height: 150px;">Spazio pubblicitario in vendita</div>

che produce questo risultato

È stato usato il tag line-height: 150px; che ha lo stesso valore numerico dell'altezza del rettangolo height:150; e che vincola l'altezza della riga a essere come quella del box. Questo produce un allineamento verticale del testo. L'allineamento orizzontale è invece dato dal tag text-align: center;. Concludo ricordando che molti problemi di allineamento di oggetti siano essi testi, widget o immagini si risolvono usando il codice di una tabella nelle cui celle inserire i singoli elementi. 

Infine se si vuole centrare orizzontalmente e verticalmente in un rettangolo un testo formato da più di una sola riga non si può usare il tag line-height ma questo nuovo codice 

<style>
#contenitore {
width:250; height:150; color:#f33; background:#fbf; text-align: center; border: 1px solid #036; display: table;
}
#contenuto {
    display: table-cell;  vertical-align: middle; padding:4px;
}
</style>
<div id="contenitore">
    <div id="contenuto">Spazio pubblicitario in vendita. I costi e le condizioni possono essere consultati nell'apposita pagina.</div>
</div>

in cui sono stati utilizzati i tag display: table; e  vertical-align: middle; oltre a un bordo e a un padding di 4 pixel per separare i caratteri dal bordo. Potete vedere la Demo online su CodePen.

COME CENTRARE UNA IMMAGINE IN UN CONTENITORE

Per centrare orizzontalmente e verticalmente una immagine si può usare questo ultimo codice

<style>
#contenitore {
width:250; height:250; color:#f33; background:#fbf; text-align: center; border: 1px solid #036; display: table;}
#contenuto {display: table-cell;  vertical-align: middle;}
 </style>
 <div id="contenitore">
    <div id="contenuto"><img src="http://lorempixel.com/120/120"/></div>
</div>

in cui non sto a ripetere che si possono personalizzare i parametri dei colori, dei bordi e delle misure. Il risultato di questo codice postato su Real Time Editor ha prodotto questo risultato