Come centrare un'immagine in una foto con Microsoft Expression

August 26

Microsoft Expression Web ti aiuta a sviluppare le pagine Web in modo rapido. Utilizzando Cascading Style Sheets (CSS) in Expression Web, è possibile stilizzare il contenuto all'interno della vostra pagina web. DIV funzionano come la costruzione di blocchi di CSS, che consente di personalizzare come gli elementi sono collocati. È possibile aggiungere un'immagine di sfondo da un DIV e inserire testo, immagini o altri contenuti al suo interno. Dal momento che è possibile anche lo stile del tag DIV e immagine, è possibile centrare un'immagine all'interno di un'altra immagine in Expression Web.

istruzione

1 Aprire il file HTML che si desidera modificare in Microsoft Expression Web.

2 Fare clic sulla scheda "Codice" nella parte inferiore dello schermo per passare alla visualizzazione del codice.

3 Aggiungere il seguente codice CSS tra i tag <HEAD> del codice HTML. Si crea uno stile che centra l'immagine più piccola all'interno dell'immagine più grande, ma non centrare l'immagine più grande:

<Style type = "text / css">

<! -

.body {margin: 0 auto; }

bgImage {

background-image: url ( "largerImage.jpg");

width: 600px;

altezza: 450px;

}

img {

text-align: center;

blocco di visualizzazione;

}

->

</ Style>

4 Aggiungere il seguente codice CSS tra i tag <HEAD> del codice HTML. Si crea uno stile che centra sia l'immagine più grande e l'immagine più piccola al suo interno:

<Style type = "text / css">

<! -

.body {margin: 0 auto; }

bgImage {

background-image: url ( "largerImage.jpg");

width: 600px;

altezza: 450px;

margin: 0 auto;

}

img {

margin: 0 auto;

blocco di visualizzazione;

}

->

</ Style>

5 Sostituire "largerImage.jpg" con il nome del l'immagine più grande sullo sfondo. Sostituire l'altezza e la larghezza con le dimensioni reali che si desidera utilizzare.

6 Scorrere fino al tag <body> e aggiungere il seguente codice in cui si desidera visualizzare la seconda immagine. Aggiungi '<div id = "bgImage">' prima del tag <IMG> per applicare lo stile che si è creato nel passaggio 3 o 4.

<Div id = "bgImage">

<Img />

</ Div>

</ Body>

7 Sostituire "smallerImage.jpg" con il nome della seconda immagine che è centrata all'interno dell'immagine principale.

Consigli e avvertenze

  • Se Internet Explorer 8 non centrare l'immagine dopo aver aggiunto "margin: 0 auto", sostituire il tag <HTML> nella parte superiore della pagina con il seguente XHTML 1.0 Transitional dichiarazione (da W3 Schools) <! DOCTYPE>:
  • <! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
  • "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Articoli Correlati