Hack CSS

Centrare un box

Questo articolo è stato riscritto ed integrato. Il nuovo articolo è reperibile al seguente indirizzo: http://atomsurfer.altervista.org/
xhtml_e_css/riscritture/
allineamento_blocchi_testo.php

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

Il metodo STD per centrare un box coi CSS è utilizzare margin: auto; ma non è supportato da IE 5.x e precedenti (oltre che, naturalmente, IE 6 in modalità quirk*), per centrare un box con questi browser bisogna riccorre ad una semplice hack: inserire text-align: center; nell'elemento genitore*.

Alcuni esempi:

Nel CSS:


  body{

    text-align: center; /* alinea il box con IE */

  }


  #id_del_box{

    margin: auto; /* alinea il box con i browser in modalità standard */

  }

E nel body:


  <div id="id_del_box">

    Questo è un box centrato :P

  </div>

*Approfondimenti:

ProHTML: Il doctype ed il doctype switch nei moderni browser, articolo che consiglio vivamente anche per capire cosa si internde per quirk mode.

HTML.it: Classificazione degli elementi, conoscenze di base che non tutti possiedono.