Very short trick: come centrare elementi sulla pagina, anche su IE5

Non è che io me la prendo sempre con Internet Explorer, è solo che ogni dannata cosa positiva dello sviluppo Web (HTML e CSS) sembra non funzionare con il browser – ancora – più diffuso (un giorno qualcuno mi spiegherà il perchè). Un metodo assai comodo per posizionare un elemento al centro della finestra del browser è quello di sfrutture la proprietà auto dello stile margin; ad esempio ecco come posizionare un div al centro dello schermo:

1
2
3
<div id="box">
    <p>Contenuto del DIV</p>
</div>
1
div#box{width:300px;height:200px;margin:0 auto}

Sfortunatamente (manco a dirlo) su IE5 questo non funziona! Un modo per superare il problema è sfruttare un ulteriore “difetto” di IE5 nell’uso dello stile text-align. In pratica basta scrivere:

1
2
body{text-align:center}
div#box{width:300px;height:200px;margin:0 auto;text-align:left}

In tutta sincerità personalmente mi rifiuto di scrivere “tal zozzata”, tuttavia potrebbe sempre tornare utile. Comunque lo scopo di questo “trick” era appunto mettere in luce la tecnica del margin auto!

3 commenti a: “ ”

  1. 05 dic, 2008 Federico:

    Giusto trick. Quando occorre, cerco di evitare il text-align sul body e creo un div con text-align center e width 100% nel quale poi inserisco il div da centrare.

    Te dici che ti rifiuti di accettare questa “zozzata” (e come darti torto).. quindi come ti comporti quando occorre centrare? Ti tappi il naso o hai altri metodi?

    RispondiQuota
  2. 05 dic, 2008 Giovambattista Fazioli:

    @Federico: so che ti sembrerà assurdo ma, quando posso, IE non lo considero proprio! Anzi, a dirti il vero, ormai per me IE è fondamentalmente l’anti-browser! Comunque, come alternativa ci sono anche le tabelle, forse ancora più “zozzata” del body con text-align:center. Comunque si, hai detto bene tu… quando sono costretto, mi tappo il naso :)

    RispondiQuota
  3. 08 dic, 2008 Federico:

    tabelle? Faccio finta di non aver letto.. ;)

    volevo solo essere sicuro che non ci fosse qualche altro metodo. Ti ringrazio per la risposta! Mi sembra una scelta coraggiosa la tua (quella di non considerare ie).. Leggo le statistiche dei miei siti e purtroppo mi sembra che il tempo non sia ancora maturo. Ma sono fiducioso, occorre reggere ancora per poco.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL