HTML – centrare una immagine verticalmente a fianco di un’altra immagine

  • Categoria dell'articolo:Tutorial / Web

Il caso è il seguente: visualizzare due immagini foto1 e foto2 nella pagina, una a fianco dell’altra, ma la foto1 più piccola deve essere centrata verticalmente rispetto la foto2.

La soluzione più semplice è creare una tabella e assegnare la proprietà “centratura verticale” alle due celle.
Tuttavia nei dispositivi mobili la tabella si riduce in proporzione allo schermo rendendo difficile la visualizzazione delle due immagini; meglio sarebbe se queste si dispongono l’una sull’altra.
La tabella non ha però la possibilità di far scivolare le celle una sull’altra.


Soluzione 1

Usa il plugin Shortcode Ultimate combinando gli shortcode [columns] e [image carousel] con un crop=1:1, 4:3, 16:9, etc.





 

Di seguito il codice da inserire nella pagina.


Soluzione 2

Puoi applicare del codice <style> e <div> alla foto per centrarla verticalmente e poi annidare il codice in due colonne usando il plugin Shortcode Ultimate.
Assegna al contenitore della foto1 un’altezza in pixel identica a quella della foto2.
Al posto della foto1 puoi inserire del testo o qualsiasi altro elemento.

Di seguito il codice html da inserire nella pagina.