Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Come affiancare perfettamente due o piu` immagini (o gadget)

di Maria Silvana Radice    

How to align perfectly, two or more images (or gadgets):


 





Vi propongo due metodi.

Il primo metodo..

..consiste nell'utilizzare questo codice:

<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>

Le immagini si allineano relativamente alla loro base.

Esempio:


Il valore dato alla voce "padding" serve a distanziare le immagini tra loro e anche dal margine superiore e inferiore. Se volete specificare tale distanza, potete impostare il comando in questo modo:

padding: 10px 50px 30px 5px;

Ricordando che la sequenza è: "top right bottom left".

Per centrare il blocco delle immagini, è possibile racchiudere il tutto in un ulteriore div con questo comando: <div align="center">, oppure: <div style="text-align:center">

Ma....come affiancare, diversamente, immagini che sono di dimensioni differenti?

Per esempio, potrebbe capitare di dover allineare un'immagine orizzontale ed una verticale. Vediamo come fare....

Il codice, diventa così:

<div style="display:inline-block;padding:10px;vertical-align:middle">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px;vertical-align:middle">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px;vertical-align:middle">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>

Il parametro che è stato aggiunto è <td style="vertical-align:middle"> e serve stabilire la linea di allineamento delle immagini.
La scelta è tra:

middle: le immagini sono affiancate seguendo la loro linea centrale.
Esempio:

bottom: le immagini sono affiancate seguendo la loro linea di base.
Esempio:

top: le immagini sono allineate seguendo la loro linea superiore.
Esempio:

Ecco fatto, per tutti i gusti :-)

Il secondo metodo..

..consiste  nell'utilizzare le tabelle, in questo modo:

<table style=" width:100%; max-width:600px; margin:0 auto; border-collapse: separate; border-spacing: 2px; border: 0;">
<tbody>
<tr>
<td>
<img style="width:100%" src="URL immagine">
</td>
<td>
<img style="width:100%" src="URL immagine">
</td>
<td>
<img style="width:100%" src="URL immagine">
</td>
</tr>
</tbody>
</table>

I parametri modificabili sono quelli in rosso.
La tabella è centrata nella pagina, se la volete a sx, togliete il comando "margin:0 auto;". Se la volete a dx, sostituitelo con il comando "float:right;".


Se le immagini fossero di più, basterà ripetere, sotto l'indirizzo dell'ultima immagine e, più precisamente, sotto l'ultimo </td> e prima di  </tr>,  questa parte del codice:

<td>
<img style="width:100%" src="URL immagine">
</td>

Se volete aggiungere una seconda fila di immagini sotto alla precedente, dovete ripetere, invece, tutta la parte tra <tr></tr> (tag compresi).

<tr>
<td>
<img style="width:100%" src="URL immagine">
</td>
<td>
<img style="width:100%" src="URL immagine">
</td>
</tr>

Aggiungere un collegamento:

Se volete aggiungere un collegamento alle immagini, dovete inserire il parametro href, in questo modo:

 <a href="URL collegamento"><img style="width:100%" src="URL immagine"></a>






Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in