Come Sinistra, Destra, Centro si allineano con i CSS

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.

istruzione

Come per allineare il testo

1 Per allineare il testo all'interno di un blocco normale di testo come un paragrafo o un blockquote, utilizzare la proprietà text-align.

2 Come Sinistra, Destra, Centro si allineano con i CSS

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;

}

Come centrare div, wrapper div e Corpo

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 Come Sinistra, Destra, Centro si allineano con i CSS


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;

}

Consigli e avvertenze

  • Normalmente non è necessario l'utilizzo di allineare-sinistra da allineamento a sinistra è l'impostazione predefinita. Tuttavia, è necessario essere consapevoli che esiste nel caso in cui è necessario ripristinare precedentemente centrato o allineato a destra del testo per l'impostazione predefinita in uso successivo.
  • La larghezza dell'elemento da centrare può essere impostato in pixel, percentuali o SME.