Come mettere due immagini una accanto all’altra usando HTML e CSS

Non sei espertissimo in grafica html e css, anzi, ma a lavori ti hanno chiesto di creare una pagina web che abbia due immagini una accanto all’altra. Il fatto che ci stai provando ma le due immagini restano una sopra l’altra e non riesci ad affiancarle. Non preoccuparti non è colpa tua. La procedura per mettere due immagini accanto è semplice basta usare qualche comando HTML con un po’ di codice CSS.

Per semplificare la procedura è consigliato, ma non indispensabile, avere gli strumenti giusti per realizzare la tua grafica web ed affiancare due immagini html. Elenco alcuni strumenti per realizzare una pagina html completa di testo e immagini; anche senza essere un webmaster. Vedrai che affiancare due immagini html è una cosa piutosto semplice basta che segui questa breve guida per … mettendoci il giusto tempo e concentrazione. Cominciamo?

In questa breve guida semplificata vedremo come inserire due immagini sulla stessa riga html. Sono sicuro che alla fine della procedura sarai molto soddisfatto del risultato. E scoprirai che inserire due immagini sulla stessa riga di una pagina HTML usando un po di CSS è una cosa molto semplice e utilissima.

Ricordiamoci che una pagina html dovrà essere anche bella da vedere e da “sfogliare” per questo questa procedura farà si che la tua pagina sia anche più armonica.

Come mettere due immagini accanto in HTML

L’attributo align permette di definire il tipo di allineamento dell’immagine:

  • LEFT: l’immagine è allineata alla sinistra del testo
  • RIGHT: l’immagine è allineata alla destra del testo
  • TOP: il testo è allineato con il margine superiore destro dell’immagine
  • MIDDLE: il testo è allineato con il centro dell’immagine
  • BOTTOM: il testo è allineato con il margine inferiore destro dell’immagine

Come mettere due immagini accanto CSS

Se vuoi controllare le tue immagini tramite CSS allora bisogna inserire nel HEAD della tua pagina Html, il codice CSS che controlla l’allineamento delle immagini. in questo modo (<head>inserisci qui il codice css</head>) poi nel body assegna la classe alla tua img proprio in questo modo <div class=”controlloimmagine”><img src=”foto.jpg” align=”right”><img src=”foto.jpg” align=”right”></div> affronteremo questo discorso sui CSS nel prossimo articolo dedicato alla UX design.

Facciamo un breve esempio su come allineare due immagini in html, il codice che dovrà essere inserito nel tag <body> della tua pagina html sarà il seguente.

<img src=”foto.jpg” align=”right”><img src=”foto.jpg” align=”right”> 

oppure possiamo usare una tabella semplice semplice all’interno del nostro codice.

Quindi, Per allineare tre immagini il codice da usare è il seguente:

<table cellspacing=”2″ cellpadding=”2″ width=”560″ border=”0″>
<tbody>
<tr>
<td valign=”top” width=”186″>Codice immagine 1</td>
<td valign=”top” width=”186″>Codice immagine 2</td>
<td valign=”top” width=”186″>Codice immagine 3</td>
</tr></tbody></table>

Altre soluzioni come allineare due immagini html

Presto pubblicherò altri metodi per allineare le immagini in wordpress senza l’uso di Html e css:
Come mettere due immagini accanto in HTML e CSS

  •  affiancare due immagini in wp
  • inserire due immagini sulla stessa riga
  • due immagini affiancate sena l’uso di html e css
  • come allineare due immagini

Se ritieni utile questo articolo fammelo sapere lasciando un commento a questo articolo! grazie Francesco 

Monaco Design

Monaco Design realizzazione Siti Web SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *