centrare un div di dimensione variabile

**83kiara83** · 25-06-2008, 09:42

Ciao a tutti,
avrei l'esigenza di centrare un div all'interno della pagina. Il mio problema è che la larghezza del div è variabile e quindi se uso il solito sistema margin auto nn funziona.
Qualcuno sa come risolvere questo problema??
grazie

**gengix** · 25-06-2008, 11:18

Scusami non mi torna molto quello che hai detto ( o non ho capito io =) ), cmq margin:0 auto centra un elemento a prescindere dalle sue dimensioni.

Hai fatto così? :

codice:

body {
margin:0;
padding:0;
text-align:center;
}
#tuo_Div {
margin: 0 auto;
....
}

**Mich_** · 25-06-2008, 11:33

Scusami non mi torna molto quello che hai detto ( o non ho capito io =) ), cmq margin:0 auto centra un elemento a prescindere dalle sue dimensioni purche` il contenitore abbia dimensinoi definite

Hai fatto così? :

codice:

html, body {
  width: 100%;
}
body {
  margin:0;
  padding:0;
  text-align:center;
}
#tuo_Div {
  margin: 0 auto;
  ....
}

**gengix** · 25-06-2008, 11:45

Non ho capito la tua correzione in questo frangente.
#tuo_Div nel suo caso ha delle dimensioni stabilite ma variabili dinamicamente e da quello che ho capito è il contenitore principale.
Nel codice che ho riportato non ho definito dimensioni mettendo dei puntini perchè era sottinteso dal suo post che fossero definite.

se ho questo codice:

codice:

body {
  margin:0;
  padding:0;
  text-align:center;
}
#tuo_Div {
  margin: 0 auto;
  width:600px; /*esempio di larghezza che verrà modificata*/
  .....
}

non c'è bisogno di definire una width:100% per gli elementi body e html.

**Mich_** · 25-06-2008, 14:38

non c'è bisogno di definire una width:100% per gli elementi body e html

No, e` proprio li` il punto.
Alcuni browser stringono il body il piu` possibile, per cui poi i margini automatici non hanno piu` significato.
E` necessario che il contenitore (in questo caso il body) sia largo il 100%, e ricorsivamente tutti i blocchi fino alla finestra (definita dal tag <html>).

Nei browser standard il body e` un oggetto diverso dall'html (invece in IE6 i due oggetti sono coincidenti).

**gengix** · 25-06-2008, 15:02

Nei browser standard il body e` un oggetto diverso dall'html (invece in IE6 i due oggetti sono coincidenti).

e fin qui siamo daccordo.

Alcuni browser stringono il body il piu` possibile, per cui poi i margini automatici non hanno piu` significato.

Questo comportamento mi è nuovo nonostante io testi sui browser più diffusi compresi IE a partire dalla versione 5.
Puoi farmi un esempio di browser che necessiti di definire una larghezza per gli elementi body e html?
Mi può sicuramente servire per il futuro.

**Mich_** · 25-06-2008, 16:33

Puoi farmi un esempio di browser che necessiti di definire una larghezza per gli elementi body e html?

Che mi risulti, ad esempio FF 1.5. Non ho testato con FF 2.0 (il computer su cui lavoro e` un po' vecchio e non suopporterebbe un browser piu` pesante).

Comunque se vuoi farti un'idea piu` precisa, ti consiglio una ricerca nel forum: ci sono stati vari interventi in questo senso.

**gengix** · 25-06-2008, 17:23

Dato il seguente codice:

codice:

<!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" lang="it" xml:lang="it">
<head>
<title>prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
text-align:center;
}
#box {
margin:auto;
width:600px;
background:red;
color:#fff;
}
</style>
</head>
<body>
<div id="box">
	

Prova di testo</p>
</div>
</body>
</html>

Firefox 1.5 non da problemi di centratura del div#box.

Non è che questo comportamento succede in particolari situazioni? o con browser molto datati, perchè so che alcuni browser molto vecchi (quelli prima del 1999) non gestiscono esattamente i margini impostati con valore auto.

Discussione: centrare un div di dimensione variabile

Strumenti discussione

Ricerca discussione

Visualizza

centrare un div di dimensione variabile

Permessi di invio