centrare un div nella pagina

**pietro09** · 13-02-2007, 15:39

mi aiutate a posizionare a centro pagina un div di dimensioni note w e h? :master:

**emanueledg** · 13-02-2007, 17:02

codice:

<html>
<title>Centrare un layer con js</title>
<head>
<script language="javascript" type="text/javascript">
<!--
function centerLayer() {
var y = document.getElementById('y');
y.style.position = 'absolute';
y.style.top = (screen.width - y.offsetWidth)/2;
y.style.left = (screen.height - y.offsetHeight)/2;
}
//-->
</script>
</head>
<body onLoad="centerLayer();">
<div id="y" style="border: 1px solid #000;">Contenuto del layer
</div>
</body>
</html>

Puoi evitare la dichiarazione del posizionamento assoluto nello script se vuoi metterla nel foglio di stile:

codice:

<style type="text/css">
#y { position: absolute}
</style>

**pietro09** · 13-02-2007, 17:04

Ti ringrazio.

Sto per chiudere e vado di fretta.

Da quello che vedo, centra rispetto al browser o rispetto allo schermo? :master:

Perchè a me serve centrare rispetto al browser.

**emanueledg** · 13-02-2007, 17:55

Ho fatto degli errori, rettifico (questa soluzione ha anche il riposizionamento sull'evento window.onresize):

codice:

<html>
<title>Centrare un layer con js</title>
<head>
<script language="javascript" type="text/javascript">
<!--
function centerLayer() {
var dx = document.getElementById('dx');
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;
var xPos = (wWidth - (dx.style.width.split('px')[0]))/2;
var yPos = (wHeight - (dx.style.height.split('px')[0]))/2;
dx.style.top = Math.round(yPos) + 'px';
dx.style.left = Math.round(xPos) + 'px';
window.onresize = centerLayer;
}
//-->
</script>
</head>
<body onLoad="centerLayer();">

<div id="dx" style="position: absolute; width: 200px; height: 50px; border: 1px solid #000;">Contenuto del layer in posizionamento assoluto</div>

<div id="x" style="background-color: #def; height: 325px; width: 640px">Layer statico

Funziona solo con FF, non è una soluzione crossbrowser :( 
</div>

</body>
</html>

Ma ho comunque scoperto che la proprietà innerWidth dell'oggetto window non è supportata da MSIE ver < 5.5... Ho provato con MSIE 7.0 e non va ugualmente.
Non ho trovato oggetti equivalenti a window.innerWidth o window.outerWidth.
Quindi la soluzione non vale per browser differenti.

I'm sorry

**Mega69** · 13-02-2007, 18:03

Al posto di window.innerWidth puoi usare document.getElementsByTagName("body").offsetWidth

Per quanto riguarda l'altezza è un pò più complicato.

Cmq tutto ciò si può fare in modo crossbrowser anche usando solo i css.

**pietro09** · 13-02-2007, 21:22

vi ringrazio delle risposte

frugando nella mia raccolta ho trovato questo che è "quasi" come lo vorrei:

codice:

/*----------------------------------------------------------------------------------------
//restituisce in un oggetto {width:myWidth, height:myHeight }
//lo spazio utile interno del browser
//esempio:
function window_onresize() 
{
    var wh = ClientSize();
    var w = wh.width;
    var h = wh.height;
}
-----------------------------------------------------------------------------------------*/
function ClientSize() 
{
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) 
    {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } 
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
    {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } 
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
    {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return {width:myWidth, height:myHeight };
}

e lo uso così:
var w = wh.width;
var h = wh.height;
$("div_readonly").style.top = Math.round((h - 50)/2) + "px";
$("div_readonly").style.left = Math.round((w - 250)/2) + "px";

:master:

1) se si potesse aggiustare (l'altezza non è perfetta

)

2) la soluzione con i css, se venisse riportata, mi farebbe davvero comodo (ps. non fatemi scrivere nel forum css

per favore)

**emanueledg** · 14-02-2007, 00:35

Guarda quets pagina del W3C proprio sul CSS: ha un menu laterale che si adatta alle dimensioni effettive del viewport, inoltre resta ancorato al viewport, non al documento:
http://www.w3.org/Style/CSS/learning

Dai uno sguardo al foglio di stile.
[Postare nel forum CSS, perché no?

]

**Xinod** · 14-02-2007, 01:20

ma anche senza postare
e' un argomento sempre gettonatissimo, basta una ricerca, e c'e' anche qualcosa nei link utili in rilievo
ciao

**Igreo** · 14-02-2007, 01:58

Comunque per ovviare a tutto ciò, visto che si parla di un div, esiste il parametro VALIGN da inserire nel div:

<div valign="middle">

Ciao!!

**emanueledg** · 14-02-2007, 02:07

Originariamente inviato da Igreo
Comunque per ovviare a tutto ciò, visto che si parla di un div, esiste il parametro VALIGN da inserire nel div:

<div valign="middle">

Ciao!!

No, ti sbagli, l'attributo valign in un layer div non solo non esiste tra le specifiche ufficiali del W3C, ma non è neanche uno di quegli elementi come l'<embed>, che funziona sebbene deprecato, o come l'attributo height.

codice:

<html>
<head>
</head>
<body>
<div id="container" style="width: 100%; height: 100%" valign="middle">
<div style="border: 1px solid #000;">da centrare</div>
</div>
</body>
</html>

Come potrai vedere non funziona con nessun browser.
Una piccola prova prima di postare rende tutto più facile e sicuro.

Discussione: centrare un div nella pagina

Strumenti discussione

Ricerca discussione

Visualizza

centrare un div nella pagina

Permessi di invio