L’allineamento orizzontale degli elementi XHTML con i CSS

Vediamo come allineare gli elementi XHTML con i Fogli di Stile, ma prima chiariamo la differenza tra allineamento del testo ed allineamento dei blocchi.

Blocchi e testo

Dreamweaver, FrontPage e gli altri editor WYSIWYG, possono portare a pensare (sono ottimista ;) che un paragrafo, per fare un esempio, sia composto da del testo. In realtÃ?  non è proprio cosÃ?¬!

Un paragrafo è un blocco delimitato dai tag <p> e </p>. Il suo allineamento è diverso ed indipendente dall’allineamento del testo che racchiude.

Allineamento del testo

Per allineare il testo si usa text-align: left | center | right.

Esempio:

p{text-align: left;}

p{text-align: center;}

p{text-align: right;}

Come potete vedere dall’esempio, al cambiare del text-align, è il testo contenuto nel paragrafo a spostarsi, mentre il bordo (che delimita il paragrafo) non si muove.

Stesso discorso per le immagini che in questo caso si comportano come il testo. Il seguente esempio centra un’immagine al centro di un div contenitore:

<div style="text-align: center”><img src=”img.png” alt=”Loading… ” /></div>

Per allineare i blocchi la cosa si complica un po’ (non troppo perÃ?² :).

Allineamento dei blocchi

Allineamento centrale

Il codice CSS per centrare un blocco è:

p{
   width: 5em;
   margin: auto;
}

Purtroppo non è supportato dalle versioni di IE 5.x e precedenti, oltre che da IE 6 se fatto funzionare in modalitÃ?  retrocompatibile [nota 1]. Per questo browser è necessario impostare un text-align: center all’elemento contenitore.

Quindi, prendendo come esempio questo codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   </head>
   <body>
      <p>Il paragrafo è centrato ed il testo a
sinistra.</p>
   </body>
</html>

Il codice CSS per allineare al centro il blocco del paragrafo è:

/* elemento contenitore del </p> */
body{text-align: center;}
p{width: 5em; margin: auto; text-align: left;}

Da notare il text-align: left dato al paragrafo. Infatti, se il text-align: center dato al body allinea al centro il blocco con Internet Explorer, allo stesso tempo allinea al centro tutto il testo racchiuso nel body. Per eliminare questo basta dare un diverso text-align all’elemento specifico, in questo caso p.

Allineare a destra un blocco

Per allineare a destra un blocco si pu�² usare float: right.

Quindi prendendo come esempio questo codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
   <head>
   </head>
   <body>
      <div id="contenitore">
         <!-- Codice del documento-->
      </div>
   </body>
</html>

Il codice CSS per allineare il blocco contenitore a destra è, semplicemente:

#contenitore{float: right;}

Note

1 IE 6 funziona in modalitÃ?  retrocompatibile - o quirk mode - a seconda del doctype dichiarato. Per maggiori chiarimenti vedi l’articolo Il doctype switch.

Hai trovato interessante questo articolo? Se vuoi, inscrivendoti alla newsletter, puoi ricevere una notifica ogni volta che c'è un nuovo articolo da leggere, oppure puoi sottoscrivere il feed RSS. Se non sai cos'è puoi leggere: Cos'è e come si legge un feed.
di Francesco Terenzani, 29 November 2005

post<li>

tag: , , , .

post correlati:


Commenti (9). Commenti in formato RSS

  1. Paolo scrive:

    guida molto chiara. Bravo.

  2. eures scrive:

    Sì, col cavolo che in Firefox riesci ad allineare un’immagine al centro usando text-align:center…-)

  3. Fra_T scrive:

    ciao eures, text-align center lo devi dare ad un elemento contenitore come un div o un p. In questo caso l’immagine sarà centrata :-)

  4. eures scrive:

    Sorry Fra, con Firefox text-align:center non funge… Saluti!

  5. eures scrive:

    Ok, se metto solo un div, funziona, ma sono in una situazione complessa dove ho diversi div annidati e alla fine 3 div float:left, nel div di mezzo con Explorer l’immagine rimane centrata, con Firefox invece no… (un giorno mi ci metterò d’impegno e scoprirò il perché, per adesso ho risolto usando text-align:-moz-center…-)

  6. Fra_T scrive:

    giusto una prova, ma con text-align: center !important funziona?

  7. eures scrive:

    Dipendeva dal fatto che nel foglio di stile avevo messo per le immagini una classe display:block, e a Mozilla evidentemente questo non piace… (ora dimmi te che male c’è a voler allineare al centro un’immagine display:block…-)

  8. Fra_T scrive:

    ah, capito :P
    non c’è niente di male, ma per allineare al centro un elemento block devi dare un margin auto a sinistra e a destra :P

  9. eures scrive:

    Yes, it works…
    Però, mentre per Explorer va bene sia text-align:center che margin:auto, Mozilla accetta solo margin:auto, non è un po’ pretenzioso?…

Scrivi un commento

XHTML: Puoi usare questi tag XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>