Si sa, per quel che riguarda i CSS (Cascade Style Sheets o fogli di stile) Internet Explorer è tra i browser peggiori.
Non interpreta correttamente (come da manuale w3c) le proprietà dei css e li legge a modo suo.
Firefox invece è molto più aderente allo standard ufficiale, ma non tutti usano Firefox.
Così, quando bisogna centrare un <div> o un’altro elemento le cose si complicano. Per evitare il classico <center></center> ed avere la compatibilità su tutti i browsers un modo c’è, ma bisogna fare un piccolo trick.
Visto che mi capita di farlo spesso lo scrivo qua come promemoria personale, magari utile anche a qualcun’altro.
Il “trucco” è questo.
Bisogna creare 2 <div> uno dentro l’altro, in questo modo:
<div id="contenitore1">
<div id="contenitore2">Contenuto, testo, foto, ecc...</div>
</div>
Poi bisogna creare gli stili nell’header della pagina o in un file .css a parte:
#contenitore1 {
text-align: center; /* per Internet Explorer */
}#contenitore2 {
margin: 0 auto; /* allineamento standard in CSS */
text-align: left; /* compensiamo l’allineamento al centro */
/* AGGIUNTI SOLO PER VISUALIZZARE MEGLIO L’ESEMPIO: */
border: 2px solid #000;
width: 50%;
}
Ecco fatto, il trucco è tutto qui.
Buon allineamento!
Nel maggio 2008 sono stato uno dei 4 fortunati vincitori del seo contest "
April 30th, 2009 at 12:46
Sei il mio salvatore. Grandeeeeeeeeee
June 27th, 2010 at 20:21
Sei stato chiarissimo! Grazie Mille!