April 22
Invece di usare l'allineamento attributi HTML con i tag HTML che il testo di markup, la best practice per i web designer è quello di spostare la presentazione (opzioni di allineamento) informazioni al foglio di stile. Questo articolo spiega come allineare il testo e come centrare gli elementi della pagina più grandi come div.
1 Per allineare il testo all'interno di un blocco normale di testo come un paragrafo o un blockquote, utilizzare la proprietà text-align.
Le scelte di valore per la proprietà di test-align sono lasciati, destra, centro e giustificano. Dal testo giustificato non è molto leggibile sul Web, l'illustrazione mostra solo di sinistra, destra e centro. In questa illustrazione, ogni punto ha un bordo nero per dimostrare la dimensione dell'elemento di blocco sulla pagina se non larghezza impostata viene applicato all'elemento.
3 Normalmente un elemento viene assegnato un id o classe. L'allineamento del testo di tutti gli articoli in cui id o classe è impostato con una norma come uno di questi: sinistra {
text-align: left;
}
destra {
text-align: right;
}
centro {
text-align: center;
}
4 Si consiglia di centrare un intero layout o una grande divisione di un layout. In questi casi si utilizza una tecnica CSS diverso.
5 Si applica la regola CSS per il selettore elemento più grande che si desidera centrato. Potrebbe essere l'elemento del corpo, un div involucro o un div contenitore.
6 Centraggio da questo metodo non influisce allineamento del testo. L'elemento centrato manterrà il default lasciato allineamento del testo all'interno dell'elemento centrato.
7
Quanto segue è un esempio di un intero elemento del corpo (con un bordo nero per motivi di chiarezza) incentrata su una pagina. Una larghezza deve essere impostata per l'elemento, quindi i margini sinistro e destro sono impostati su auto. Ecco come:
body {
width: 80%;
margin-right: auto;
margin-left: auto;
border: 1px solid black;
}