Davide Muzzarelli

Centrare orizzontalmente le pagine web

published on 27.01.2007 in * livello intermedio, internet, script completi

Ecco pronto un metodo veloce per centrare le pagine nei siti web.

Questo è il file HTML:

<home>    <head>        <link rel="stylesheet" type="text/css" href="default.css" />    </head>    <body>        <div id="container">            <!-- metti tutto il contenuto qui -->        </div>    </body></html>

Questo è invece il contenuto del file CSS:

body {    text-align: center   /* centra in IE5.x */}

div#container {    width: 760px;    margin: 0 auto;   /* centra negli altri browser */    text-align: left;   /* ripristina l'allineamento */ }

Si utilizza il BODY per centrare il contenuto, questo metodo funziona su IE5.

La larghezza della pagina è definita a 760px che è quasi uno standard per la risoluzione 800×600 in quanto tiene conto della barra di scorrimento laterale e dei margini della finestra.

Il trucco per centrare la pagina è presto spiegato: si applica semplicemente un margine automatico ai lati del DIV in modo che il browser mantenga lo stesso margine da entrambi i lati. Questo metodo funziona anche ridimensionando la finestra senza l’ausilio di JavaScript.

L’attributo “text-aling: left” nel DIV serve a ripristinare l’allineamento corretto del testo.

Comments

Una Risposta to “Centrare orizzontalmente le pagine web”. Tutti gli utenti che hanno commentato hanno accettato le note legali.
  1. Anonymous scrive:

    Grazie ci hai risolto 2 problemi in uno… il sito è in centro e se si ridimensiona la pagina i float non si spostano

Dicci Cosa Pensi

Lascia un commento qui sotto...

Confermando l'invio accetti di aver letto le note legali e di aderire ad esse.