Come centrare pagine web utilizzando i CSS

May 17

Quando si progetta la propria pagina web, si consiglia di posizionarlo a rimanere al centro della finestra del browser, anche se è ridotto al minimo o disteso. È possibile ottenere questa formattazione utilizzando Cascading Style Sheets (CSS) nel codice HyperText Markup Language (HTML). Questo consentirà di evitare un sacco di markup in più che potrebbe prolungare il tempo necessario per la tua pagina da caricare. Con la creazione di un paio di stili CSS, è possibile centrare rapidamente la propria pagina web.

istruzione

1 Avviare l'editor di testo HTML e iniziare una nuova pagina o aprirne uno esistente.

2 Individuare il "<head> </ head>" parte nella parte superiore del codice, posizionare il cursore tra i due elementi e iniziare il CSS regola di stile "corpo" che controlla la tua pagina generale. Per esempio:
<Head>
<Style type = "text / css">
<! -
body {}
->
</ Style>
</ Head>

3 Inserire un valore pari a zero per il "margine" e "imbottitura" attributi in modo che la pagina viene visualizzata correttamente su browser che hanno differenti valori di default di visualizzazione. Inserire "margin: 0;" e "padding: 0;" all'interno del tag "corpo" in quanto tale:
body {margin: 0; padding: 0; }

4 Scegliere un termine per una nuova regola di stile che gestisce la posizione tenendo il contenuto della pagina web (per esempio, "contenitore"). Inserisci questo termine, preceduto da un periodo, sotto la regola di "corpo" come segue:
.container {}

5 Inserire un attributo "larghezza" nel tag dal punto 4. Questo attributo determina l'ampiezza vostra pagina sarà, usando un termine di misura, come pixel (per esempio, "780px"). Quindi, immettere "margin: 0 auto;" per consentire l'impostazione di lavorare in alleanza con la regola del "corpo" per centrare la vostra pagina. Per esempio:
.container {width: 780px; margin: 0 auto; }

6 Utilizzare la funzione "Preview" del vostro editor di testo per visualizzare la pagina web centrato.

7 Salvare il documento.

Consigli e avvertenze

  • Se non si desidera una barra di scorrimento orizzontale a comparire sulla tua pagina, non fare la vostra larghezza della pagina più grande di 780 pixel (punto 5).