September 14
oggetti centrati in grado di trasmettere un senso di equilibrio e simmetria in un disegno. Molte pagine Web che si vede sul display di Internet centrati intestazioni, immagini e altri oggetti. Si potrebbe voler centrare un tavolo o anche un modulo di iscrizione su una delle tue pagine web. HTML, il linguaggio di markup utilizzato per creare pagine Web, non fornisce un comodo "centro di questo" tag. È ancora possibile posizionare gli oggetti al centro delle pagine Web utilizzando i fogli di stile a cascata (CSS).
1 Avviare Blocco note e aprire un documento HTML che definisce uno dei tuoi siti web.
2 Aggiungere il seguente codice HTML alla sezione "corpo" del documento:
<Div class = "centerItem">
<Img />
<H1> Direzione Centrato </ h1>
</ Div>
Questo crea un blocco "div". Questo blocco contiene un'immagine e un titolo. Sostituire "xyz.jpg" con il nome di un'immagine sul disco rigido. Includere il percorso completo a quell'immagine. Per esempio, se un file denominato "clean.jpg" si trova nella cartella "Todo" sull'unità "C", il tag img sarebbe come segue:
<Img />
3 Rivedere la dichiarazione di "div" tag indicato nel passaggio precedente. Questo tag fa riferimento a una classe CSS chiamato "centerItem." La classe "centerItem" contiene le definizioni necessarie per centrare il blocco "div" ei due oggetti all'interno del blocco.
4 Inserire il seguente codice CSS ovunque nella sezione "testa" del documento:
<Style type = "text / css">
.centerItem {
margin: 0 auto;
width: 400px;
text-align: center;
border: 2px solido;
}
</ Style>
Questo crea la "centerItem" classe CSS riferimento nel passaggio precedente. I suoi valori di margine sono "0 Auto". Dare i valori dei margini fa sì che il browser per centrare il blocco "div". La proprietà width definisce la larghezza di quel blocco "div". In questo esempio, che la larghezza è di 400 pixel. È possibile impostare che la larghezza di qualcosa che ti piace. Il "text-align: center" centri di proprietà degli oggetti all'interno del blocco "div". Da quel blocco contiene un'immagine e un titolo, quegli oggetti appariranno centrato all'interno del blocco "div". La proprietà border mette semplicemente un bordo intorno al blocco "div". Questo rende più facile vedere il blocco durante il test. Questo confine è facoltativo. Se non si desidera un bordo intorno al blocco "div", eliminare la riga "border: 2px solido;"
5 Salvare il file HTML. Aprire nel browser. Si vedrà il blocco "div" al centro della pagina Web. Dentro quel blocco, si vedrà anche la vostra immagine e il titolo centrato all'interno del blocco.