Allineamento di immagini sulle pagine Web richiede l'uso di CSS o Cascading Style Sheets per scrivere regole di stile per quelle grafiche. Le regole di stile consistono di selettori - bit di codice destinati a parti specifiche della tua pagina Web..--e coppie di valori di proprietà che impostare dimensioni, colori e altro ancora. È possibile limitare le regole di stile per fare riferimento solo grafica all'interno di un div particolare aggiungendo il selettore ID per quel div davanti a qualsiasi selettore utilizzato per fare riferimento le immagini stesse. Utilizzare nomi di classe per le vostre immagini in modo è possibile scrivere uno o due regole di stile CSS e riutilizzarle su più elementi grafici.

Istruzioni

1

Aprire la pagina Web in blocco note o un editor di codice. Aggiungere il tag "< div >" con un nome ID in modo che è possibile fare riferimento nel CSS più tardi:

< div id = "immagini" >

< / div >

2

Aggiungi il tuo testo tra i tag "< div >" di chiusura e di apertura. Ovunque si desidera aggiungere un elemento grafico, utilizzare questo codice:

< img alt = "My Picture" / >

Cambiamento "path/to/image.png" che corrisponda al percorso dell'immagine sul server Web. Utilizzare l'attributo "alt" per dare il tuo grafico testo alternativo che il browser può visualizzare quando l'immagine non riesce a caricare.

3

Assegnare ogni tag "< img >" un nome di classe:

< img alt = "My Picture" class = "sinistra" / >

Utilizzare nomi di classe come "sinistra" o "destra". È possibile utilizzare lo stesso nome di classe più volte all'interno della stessa pagina Web.

4

Individuare il tag "< style >" tra i tag "< head >" nel codice della pagina Web. Aggiungere il tag "< style >" se non li trovate:

< style type = "text/css" >

< / stile >

5

Scrivere regole di stile per ogni classe ti ha dato la grafica nel vostro div:

immagini tilmato {

float: left;

margine destro: 10px;

}

immagini proprio {

float: right;

margin-left: 10px;

}

Gli esempi sopra riportati mostrano come è possibile creare regole di stile "sinistra" e "destra" per dettare l'allineamento delle immagini in voi div. Change "immagini" per il nome di ID del vostro div. uso il formato "nomedellaclasse" per fare riferimento a classi.

Consigli & Avvertenze

• Anche se non è possibile disporre testo intorno a un'immagine centrata utilizzando questo metodo, è possibile aggiungere un stile centrato tramite "margin: 0 auto;" invece di carri allegorici. Testo verrà visualizzato sopra e sotto l'immagine.