Contenuto

• indicazioni
• Come allineare il testo
• lasciato {
• giusto {
• centro {
• Come centralizzare divisioni, contorni e divisioni del corpo
• suggerimenti
• Cosa ti serve

Anziché utilizzare gli attributi di allineamento HTML contenuti nei tag HTML che contrassegnano il testo, è preferibile che i web designer trasferiscano le informazioni di presentazione (opzioni di allineamento) al foglio di stile. Questo articolo spiega come allineare il testo e come centrare elementi di pagina più grandi, come le divisioni.

indicazioni

I fogli di stile consentono di allineare e centrare più del testo (immagine di layout del sito Web di 6922 Designer da Fotolia.com)

Come allineare il testo

1. Per allineare il testo all'interno di un normale blocco di testo, ad esempio un paragrafo o una citazione, utilizzare la proprietà text-align.

2. Le opzioni di valore per la proprietà di allineamento del testo sono sinistra, destra, centro e giustificazione. Poiché il testo giustificato non è molto leggibile sul Web, l'illustrazione mostra solo gli allineamenti di sinistra, destra e centro. In questa illustrazione, ogni paragrafo ha un bordo nero per dimostrare la dimensione dell'elemento di blocco sulla pagina se non viene applicata una regolazione della larghezza all'elemento.

3. In genere, un elemento è assegnato a un ID o una classe. L'allineamento del testo su qualsiasi elemento in questo ID o classe è definito con una regola, come la seguente:

   
   

   lasciato {

   allineamento del testo: a sinistra; }

   giusto {

   allineamento del testo: giusto; }

   centro {

   allineamento del testo: centro; }

Come centralizzare divisioni, contorni e divisioni del corpo

1. Potresti voler centrare un intero layout o un grande layout. In questi casi, viene utilizzata una tecnica CSS diversa.

2. Applica la regola CSS al selettore dell'elemento più grande che vuoi centrare. Può essere l'elemento del corpo, una divisione del limite o una divisione del contenitore.

3. La centratura con questo metodo non influisce sull'allineamento del testo. L'elemento centrato manterrà l'allineamento di sinistra predefinito del testo all'interno dell'elemento centrato.

4. Quanto segue è un'illustrazione di un elemento di tutto il corpo (con un bordo nero per chiarezza) centrato su una pagina. È necessario impostare una larghezza per l'elemento, quindi i margini sinistro e destro sono impostati su automatico. Questo è fatto come segue:

   
   

   body {width: 80%; margin-right: auto; margin-left: auto; bordo: 1px solido nero; }

suggerimenti

• Normalmente non è necessario utilizzare l'allineamento a sinistra, poiché l'allineamento a sinistra è l'impostazione predefinita.Tuttavia, devi essere consapevole che esiste, se devi ridefinire il testo precedentemente centralizzato o allineato a destra in modo predefinito in un secondo momento. La larghezza dell'elemento da centrare può essere definita in pixel, percentuali o em.

Cosa ti serve

• Editor di testo
• Editor HTML
• Conoscenza HTML di base