Centrare un Div nella pagina

**Mariastella1975** · 13-06-2013, 09:47

Ciao a tutti.
Stò modificando un pò il mio sito per renderlo un pò più decente; tra le modifiche che ho hatto, c'è quella di centrare un Div nella pagina e, per farlo, ho utilizzato i CSS.

Il primo tentativo che ho fatto è stato con la seguente istruzione:

codice:

margin:0 auto;

Il secondo tentativo è stato con queste altre due istruzioni

codice:

margin-right:auto;
margin-left:auto;

Il risultato è stato deludente; con crome e firefox il div viene centrato perfettamente nella pagina mentre con il povero explorer entrambe le soluzioni non funzionano.
Mi viene da pensare che le istruzioni non sono compatibili con la versione 8 di explorer che ho nel computer.
Considerando che la versione 8 sembrerebbe l'ultima versione di explorer disponibile per windows xp e considerando che parecchie visite al mio sito avvengano proprio con questo sistema operativo e di conseguenza con questa versione del browser; ritengo indispensabile trovare del codice che possa funzionare sia con explorer 8 che con le nuove versioni di browser.
Mi sapere aiutare?
Grazie.
Ms

**slegolego** · 13-06-2013, 12:59

hai provato a dare un position:relative; al tuo div ?

**Mariastella1975** · 13-06-2013, 13:10

Premetto di non essere esperta in programmazione ma pensavo che position:relative stabilisse la posizione di un oggetto in riferimento ad un altro oggetto.
In realtà una parte l'ho sistemata.
Ho messo le seguenti righe di codice nei CSS che, ovviamente sono compatibili per gli altri browser tranne che per explorer:

codice:

margin-right:auto;
margin-left:auto;

Per quanto riguarda explorer, versioni 8 e precedenti, ho inserito il seguente codice nel tag Boby come di seguito:

codice:

sty<body style="text-align:center;">

Adesso funziona quasi tutto bene e per tutti i browser.
Purtroppo vorrei centrare il Div anche in verticale e, al momento, non ci sono ancora riuscito.
Tengo a precisare che nella mia pagina html c'è soltanto un div di 10 cm. di altezza e null'altro; vorrei centrarlo anche in verticale.
mi sai aiutare?
Grazie.
Ms.

**slegolego** · 13-06-2013, 13:21

position relative da un riferimento rispetto agli altri elementi e questo e' vero .
se al tuo div dai margin auto e position relative dovrebbe centrarsi.
prova inoltre a specificare un width per il tuo div.
senza html sotto e' un po' difficile da capire.
ad ogni modo, la soluzione su text align center, non e' elegantissima , ma non ti allinea tutto il testo al centro ?

per allinearlo verticalmente pero' dovresti dargli position:absolute; e top:50;
oppure usare javascript per centrarlo dinamicamente

**ac_socmel** · 13-06-2013, 17:24

non si centra perchè non usi un "doctype strict"

nella mia pagina html c'è soltanto un div di 10 cm. di altezza

non dirlo in giro ma i centimetri non si usano nel html

**Mariastella1975** · 14-06-2013, 10:35

Ciao ac_socmel.
Grazie per la risposta e per la sottolineatura del mio errore linguistico, ho inserito i centimetri soltanto per dare una veloce idea della grandezza del Div, ovviamente per essere precisi avrei dovuto utilizzare i pixel.
Per quanto riguarda il "doctype strict" ho visto su internet di cosa si trattasse ma non riesco ad applicarlo, suppongo che sia una riga di comando, riesci ad aiutarmi tu?
Se, invece, si trattasse di mettere sù un bel pò di codice, allora propenderei per una posizione assoluta anche se mi potrebbe portare a problemi di centramento in quanto il div da me creato non ha una dimensione fissa ma varia, seppur di poco.
Grazie mille.
Ms.

**ac_socmel** · 14-06-2013, 12:07

ma le pagine le scrivi da sola?
si può vedere cosa stai facendo?
copia-incollare un doctype come prima cosa di un documento html non mi sembra così difficile

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">
<head>
<meta http-equiv="content-type" 
content="text/html; charset=utf-8" />
<title>centrato</title>
<style type="text/css" media="all">
* {
	margin: 0;
	padding: 0
}
html {
	height: 100%;
}
body {
	height: 100%;
	width: 100%;
	text-align: center
}
.pp {
	height: 50%;
	background-color: rgba(0,0,255,0.5)
}
.oo {
	height: 10em;
	width: 40em;
	background-color: rgba(255,0,0,0.5);
	margin: -5em auto 0
}
</style>
</head>

<body>
    <div class="pp"></div>
    <div class="oo"></div>
</body>
</html>

**Mariastella1975** · 14-06-2013, 12:17

Ciao ac_socmel.
Si, le pagine me le scrivo da sola; se ci fosse stato qualcuno ad aiutarmi, non avrei chiesto aiuto al forum.
Ho provato il codice che mi hai dato ma, purtroppo, non funziona.
Quello che avevo chiesto era qualcosa compatibile anche con la versione 8 ( e precedenti) di explorer e, purtroppo, il codice che mi hai mandato non lo è.
Per le versioni successive di explorer ed altri browser, ho già risolto io.
A volte si dice "basta il pensiero" e io, per correttezza, ti ringrazio comunque.
Ciao.
Ms.

**ac_socmel** · 14-06-2013, 12:27

stai scherzando?
il mio codice è perfetto

a parte i colori che ti ho lasciato per provaper mostrarti come lavorano i div
avevi detto che gli altri ti visitavano con ie8 e non che lo usavi tu

**Mariastella1975** · 14-06-2013, 12:34

Non è mia intenzione offenderti ma il codice l'ho provato e non va.
Si, è vero. Ho detto che gli altri mi visitavano con internet explorer 8 e che io volevo rendere la pagina compatibile con questa versione; per farlo mi sembra ovvio che debba utilizzare anche io questa versione altrimenti come lo provo???
Con gli altri browser il tuo codice funziona perfettamente ma la mia domanda era finalizzata ad internet explorer, almeno la versione 8, non certo quelle dell'età primitiva.
Grazie.
Ms.

Discussione: Centrare un Div nella pagina

Strumenti discussione

Ricerca discussione

Visualizza

Centrare un Div nella pagina

Permessi di invio