Come allineare immagini, bottoni o altri oggetti HTML anche di diverse dimensioni.

Come usare il codice di una tabella e il CSS per allineare oggetti HTML quali immagini, bottoni, video o altro ancora.

La richiesta di allineare immagini o altri oggetti anche di tipo e di dimensioni diverse è una di quelle più ricorrenti nei commenti. Ho già trattato il tema in almeno un paio di circostanze con il post su come allineare orizzontalmente più elementi e con quello per allineare più immagini.

Con questo articolo intendo però usare una tabella per l'allineamento inserendo uno stile CSS in ciascuna cella in modo da poter posizionare al meglio il suo contenuto. In questo modo si possono allineare anche oggetti diversi come per esempio un video, una immagine, un testo formattato e un bottone. Nell'esempio che proporrò ci sono tre elementi da allineare ma si può scegliere un altro numero semplicemente aggiungendo o diminuendo le righe mantenendo la stessa sintassi.

Si parte quindi da un codice di una tabella come il seguente

<table border="0">
<tbody>
<tr>
<td style="padding-left:10px; padding-top:10px;">Codice 1</td>
<td style="padding-left:10px; padding-top:10px;">Codice 2</td>
<td style="padding-left:10px; padding-top:10px;">Codice 3</td>
</tr>
</tbody>
</table>

in cui al posto di Codice 1, Codice 2 e Codice 3 si può incollare il codice HTML di una immagine, di un video o di un bottone. Il codice evidenziato di giallo è quello delle tre celle in cui inserire il codice dei vari oggetti. Si possono aggiungere altre righe per allineare più di 3 elementi.

Il posizionamento dei contenuti nelle varie celle è proposto identico vale a dire con una distanza di 10 pixel dalla sinistra e sempre di 10 pixel dalla parte alta. Vediamo un esempio di come funziona questa tabella quando al posto del Codice 1 si incolla il codice del Bottone Condividi di Facebook, al posto di Codice 2 quello di un iframe di un video e al posto di Codice 3 quello di una immagine.

Visto che le dimensioni dei tre oggetti sono diverse possiamo scegliere se allinearli nella parte alta o nella parte bassa oppure se allineare i loro punti centrali come fatto nello screenshot. In ciascuna cella si opera sui valori di padding-left:10px; padding-top:10px; per impostare le distanze dalla sinistra e dalla parte alta.  Nella fattispecie modificando solo il valore di padding-top si ottiene

Ho messo padding-top:0px; per il bottone Facebook, padding-top:103px; per il video e padding-top:50px; per l'immagine. In questi casi si risolve soltanto facendo delle prove. Si può fare anche un allineamento verso il basso. Quando ci sono dei bottoni di Facebook, Twitter, Google+, ecc è bene mettere padding-top:0px; e modificare i valori delle altre celle. Al posto di padding-top si può usare padding-bottom per settare la distanza dal basso. Si possono usare anche valori negativi.

Per la distanza laterale tra i vari elementi invece di usare il tag padding-left può essere utile usare il tag cellspacing="20" da incollare nella prima riga in questo modo

<table cellspacing="20" border="0">

che imposta automaticamente la distanza di 20 pixel tra le varie celle.