Come centrare un'immagine in html

Allineare le tue immagini in una posizione appropriata rispetto ad altri contenuti sulle pagine Web è molto importante. Questo corretto allineamento definisce e migliora la struttura di un sito Web. In HTML, ci sono vari modi con cui puoi centrare un'immagine. Questi approcci sono stati discussi qui in questo blog.

Come centrare un'immagine usando la proprietà

Al fine di centrare un'immagine utilizzando la proprietà allineata da testo consultare l'esempio di seguito.

Html

Nel codice sopra, stiamo realizzando un contenitore div e posizionando la nostra immagine all'interno di quel contenitore usando il tag. Questo attributo fornisce uno stile in linea all'immagine. Quindi per centrali l'immagine, stiamo usando l'attributo di stile del contenitore Div per impostare la proprietà allineata al testo su. L'uso di questa proprietà sul tag non avrà alcun effetto, pertanto, è necessario avvolgere l'immagine all'interno di un contenitore e assegnare questa proprietà a quel contenitore.

Produzione

Ecco come cenare un'immagine.

Come centrare un'immagine usando i margini

Un altro modo per assegnare l'immagine una posizione centrata è utilizzando le proprietà del margine-destra e del margine-sinistra come abbiamo mostrato nello snippet di codice di seguito.

Html

L'uscita visualizza un'immagine centrata.

Conclusione

Per centrare un'immagine in HTML usa il allineamento proprietà o il margine-destra E margine-sinistra proprietà. Quando si utilizza la proprietà allineata al testo Avvolgere l'immagine all'interno di un contenitore Div e quindi si utilizza l'attributo di stile Impostare la proprietà allineata al testo del contenitore su centrale, mentre nel caso di utilizzare le proprietà del margine prima impostare il display dell'immagine Blocca e quindi assegnare le proprietà automatiche a margine-destra e margine-sinistra.