Come Centrare un'Immagine Usando il Codice HTML

Saper allineare le immagini è importante quando si programma in HTML. Sfortunatamente, con il passare del tempo i linguaggi di programmazione cambiano e si evolvono e alcuni tag HTML risultano deprecati, con lo svantaggio che alcuni browser internet potrebbero non essere più in grado di riconoscerli e interpretarli. Prova a usare uno dei metodi descritti nell'articolo per centrare correttamente un'immagine all'interno di una pagina web usando il codice HTML. Se le istruzioni fornite non dovessero funzionare, valuta l'idea di utilizzare un foglio di stile CSS.

Metodo 1

Metodo 1 di 2:

Allineare un'Immagine all'Interno del Testo

Scarica PDF

1
Non utilizzare l'attributo "center" all'interno del tag. In HTML è possibile centrare del semplice testo utilizzando l'attributo "center", ma nel caso di un'immagine occorre usare l'attributo "middle". Un'immagine non è composta da linee, quindi viene identificata dal browser in relazione ad altri elementi della pagina.
2
Crea una nuova linea di codice. Crea un paragrafo per indicare al browser che stai iniziando una nuova linea di testo. Il tag che indica l'inizio di un paragrafo è <p>, quindi inizia a inserire il testo che desideri.
3
Adesso inserisci l'immagine utilizzando il seguente codice: <img src="nome_immagine.gif". A questo punto includi la descrizione dell'immagine usando l'attributo alt="descrizione immagine".
- L'attributo "src" indica al browser dove reperire l'immagine, quindi rappresenta l'URL della foto da visualizzare.
- L'attributo "alt" rappresenta la descrizione testuale dell'immagine e molto spesso viene utilizzato come elemento da mostrare all'utente nel momento in cui il browser, per qualunque motivo, non è in grado di visualizzare l'immagine vera e propria.
4
Specifica l'allineamento dell'immagine. Inserisci l'attributo align="middle">. Questa porzione di codice rappresenta la fine del tag relativo all'immagine.^{[1]
X
Fonte di ricerca}
5
Aggiungi la porzione finale del testo, quindi chiudi il paragrafo utilizzando il tag </p>. Ecco una porzione di codice di esempio che riassume quanto fatto nei passaggi precedenti: <p>Stiamo imparando a programmare in HTML. <img src="dancingdogpicture.gif" alt="Cane che balla" align="middle"> Il nostro esempio è completo.</p>

Pubblicità

Metodo 2

Metodo 2 di 2:

Allineare un'Immagine Usando il Tag "Center"

Scarica PDF

1
Crea un nuovo elemento e centralo all'interno della pagina web. In HTML è possibile inserire un'immagine all'interno di un elemento centrato. Tuttavia è bene ricordare che intorno all'elemento verrà visualizzata una cornice di spazio vuoto che potrebbe risultare antiestetica.
2
Inizia una nuoca linea di codice. Parti centrando l'elemento che andrai a creare. Digita il tag <center>.
3
Aggiungi l'immagine. Digita il seguente codice <img src="dancingdogpicture.gif" alt="cane che balla".
4
In questo caso specifica l'altezza e la larghezza che avrà l'immagine. Digita i seguenti attributi height="200" width="200">. In base alle tue esigenze puoi utilizzare misure diverse. Il codice indicato chiude il tag che conterrà l'immagine da visualizzare.
5
A questo punto chiudi il tag <center> iniziale utilizzando il seguente codice </center>. Ecco una porzione di codice di esempio che riassume quanto spiegato nei passaggi precedenti:
<center><img src="dancingdogpicture.gif" alt="cane che balla" height="200" width="200"></center>.^{[2]
X
Fonte di ricerca}

Pubblicità

Avvertenze

Fai attenzione perché l'attributo "align" e il tag "center" sono stati deprecati. Questo significa che prima o poi cesseranno di essere supportati e utilizzati. La data precisa in cui questi due elementi cesseranno di essere supportati non è ancora nota, ma in futuro i browser internet non li riconosceranno più e il codice andrà aggiornato con l'utilizzo di un foglio di stile CSS o con la nuova versione di HTML5.