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.
tag: allineamento, CSS, doctype switch, internet explorer.
post correlati:
- Il box model
- Il doctype switch
- Effetti di attivazione per i link costituiti da immagini
- Selezionare i link di un documento navigato con la tastiera
- Firefox 2, IE7 ed i moduli di ricerca
- Filtri CSS per Opera browser
- Forzare l'aggiornamento della cache per file esterni
16 January 2008 alle 09:39
guida molto chiara. Bravo.
23 February 2010 alle 00:34
Sì, col cavolo che in Firefox riesci ad allineare un’immagine al centro usando text-align:center…-)
23 February 2010 alle 00:51
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 :-)
23 February 2010 alle 02:06
Sorry Fra, con Firefox text-align:center non funge… Saluti!
23 February 2010 alle 23:15
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…-)
24 February 2010 alle 11:06
giusto una prova, ma con
text-align: center !importantfunziona?25 February 2010 alle 10:28
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…-)
25 February 2010 alle 14:12
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
25 February 2010 alle 15:33
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?…