Come centrare un'immagine utilizzando la programmazione HTML

...

Utilizzare CSS per specificare l'aspetto della pagina Web.

Un codificatore di pagine Web utilizza Hypertext Markup Language per comunicare al browser Web lo scopo funzionale di ciascun elemento su una pagina, come un paragrafo, un'intestazione o un elenco. Dall'HTML 4, i fogli di stile a cascata hanno fornito al programmatore un modo per dire al browser come dovrebbe apparire ciascuno di questi elementi, separato dalla definizione di cosa sono. Una pagina può avere stili CSS diversi per diversi tipi di dispositivi, come telefoni cellulari e computer desktop, consentendo di modificare l'aspetto della pagina senza che il programmatore debba modificare l'HTML. Usa le proprietà CSS per centrare un'immagine.

Passo 1

Inserisci il tag "img" nel file HTML in cui desideri visualizzare l'immagine nella pagina Web. Deve trovarsi tra i tag "body" e dopo i tag "h1". Per esempio,

Video del giorno

Questo è il tuo testo.

Una descrizione dell'immagine

definisce un'immagine denominata photo.jpg larga 170 pixel e alta 50 pixel. È la prima cosa sulla pagina dopo l'intestazione in alto.

Passo 2

Usa l'attributo CSS "margin" per definire lo spazio intorno agli elementi della pagina, come le immagini. Il valore "auto" per l'attributo margin indica al browser Web di determinare automaticamente la quantità di spazio. Così, Una descrizione dell'immagine definisce che lo spazio intorno all'immagine è determinato dal browser.

Passaggio 3

Utilizzare la proprietà "display" per definire come viene visualizzato un elemento della pagina. Il valore "block" per la proprietà display indica al browser Web di visualizzare l'elemento sulla propria riga, con uno spazio sopra e sotto di esso. Così, Una descrizione dell'immagine definisce la stessa immagine, ma l'aggiunta di "display: block;" ora lo posiziona sulla propria riga.

Passaggio 4

Visualizza la pagina Web in diversi browser per verificare che l'immagine sia centrata correttamente.

Consiglio

Includi la descrizione dell'immagine all'interno di un tag "alt". Ciò rende la tua pagina più accessibile ai lettori ipovedenti e garantisce che il tuo codice sia conforme agli standard. Una descrizione dell'immagine