Centrare div in base alla risoluzione

[Ph:l]

Com'è possibile far in modo che l'immagine contenuta nel div in oggetto si collochi sempre al centro anche con risoluzioni diverse?

Grazie!

[grandeorco]

l' immagine la metti come background del div in modo che sia sempre al centro e il div lo posizioni in maniera assoluta al centro della pagina

[Ph:l]

ok ma come faccio a far in modo che il div stia in mezzo alla pagina con qualsiasi risoluzione?

perchè se uso absolute e cambio risoluzione mi va in giro

[Gufo]

Originariamente inviato da Ph:l
ok ma come faccio a far in modo che il div stia in mezzo alla pagina con qualsiasi risoluzione?

perchè se uso absolute e cambio risoluzione mi va in giro

Per centrare un elemento a misure fisse verticalmente e orizzontalmente,

Regole Css:

width: 200px; /*la larghezza dell’elemento*/
height: 100px; /*l’altezza dell’elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l’elemento*/
left: 50%; /*il bordo sinistra dell’elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-left: -100px; /*la metà della larghezza dell’elemento è tolta come margine superiore per centrarlo*/
margin-top: -50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/

Esempio concreto:

<div style=”width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;”>
<!–contenuto–>
</div>

[Ph:l]

molto gentile

[alexba64]

Okkio alla dimensione del container, in quel modo (che è l'unico) non centri per tutte le risoluzioni.

Se il tuo container è piu grande di 800x600, per esempio, chi ha quel tipo di risoluzione video avrà seri problemi a visualizzare tutto il tuo contenuto.

[Ph:l]

io ho provato..

però se provo con un altra risoluzione si sposta qua e là

esempio pagina

http://www.meteocaldonazzo.altervist...ivio/index.php

gli elementi son il menu e l'immagine che si crea dal menu

il css che ho provato è questo... l'ho configurato guardando con la mia risoluzione 1280x1024 ed ok.. ma se apro la pagina in 1024x768 vanno in giro gli elementi

 #elenco{
width: 200px; /*la larghezza dell’elemento*/
height: 100px; /*l’altezza dell’elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l’elemento*/
left: 30%; /*il bordo sinistra dell’elemento si troverà al 50% della larghezza disponibile*/
top: 40%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-left: -100px; /*la metà della larghezza dell’elemento è tolta come margine superiore per centrarlo*/
margin-top: -50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/ 


}
#dati{
width: 400px; /*la larghezza dell’elemento*/
height: 400px; /*l’altezza dell’elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l’elemento*/
left: 50%; /*il bordo sinistra dell’elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-left: -100px; /*la metà della larghezza dell’elemento è tolta come margine superiore per centrarlo*/
margin-top: -50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/ 

}

[Ph:l]

ehm....

[NiKolino]

Anche io ho sempre usato questo metodo per centrare i div all'interno della pagina, ma mi sono accorto che se stringi troppo (o utilizzi una risoluzione troppo bassa), la parte sx e superiore (quelle con i margini negativi) del div viene tagliata, questo non sarebbe un problema con le scrollbar...

...ma le scrollbar non vanno ne su ne a sx, solo giù e a dx!!! :master:

Qualcuno conosce un'altro metodo????