Pubblicato il 10/01/14e aggiornato il

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

centrare-immagini

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

allineare-verticalmente-testo

È 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







2 commenti :

  1. Ciao a tutti,

    Vi scrivo per chiedervi una cosa: sul mio nuovo blog www.candyhooverchannel.com ho attivato uno slider nella homepage con gli ultimi 6 post pubblicati. Il problema è che non mi piace come ridimensioni le immagini, variando di continuo l’altezza di questo elemento e, di conseguenza, il posizionamento degli articoli sulla pagina (è un continuo sali e scendi). Ho provato a giocare un po’ con le impostazioni del tema e con il codice tramite Firebug su Firefox, ma non ho trovato l’opzione che blocchi l’altezza dello slider e che non storpi le dimensioni delle foto. C’è modo di ottenere questo risultato? Per darvi un’idea, vorrei arrivare ad avere la stessa situazione che ho sull’altro mio blog www.autontheweb.it (il cui template, tra l’altro, è dello stesso sviluppatore!)

    Grazie mille

    Michele

    RispondiElimina
    Risposte
    1. Per i template scaricati da internet è sempre meglio rivolgersi ai loro autori. Spesso però non rispondono perché ovviamente non hanno né tempo né voglia di perdere qualche decina di minuti se non qualche ora senza averne nessun vantaggio economico
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.