~x86

[EDIT | DELL] #5 CSS: Posizionare un div a metà pagina e al centro ^{09/12/2007 PERMALINK}

UPDATE @ 9/12/2007 13.55

Per chi fosse interessato a centrare verticalmente un div di altezza dinamica, può usare un po' di JS, in questo modo:

Oggi voglio spiegarvi come fare una cosa apparentemente semplice ma in realtà complicata:

Posizionare un DIV a centro pagina e a metà altezza.

Bene, senza usare nessun inutile JavaScript vi farò vedere come farlo via CSS seguendo la via più semplice.

Il nostro problema è centrare un DIV in altezza e in larghezza avendo un body dinamico, ecco come fare:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<style type="text/css">
body {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-color: #000;
	font-family: Georgia, serif;
}
</style>
</head>

<body>
	<div id="test" style="position:absolute; top: 50%; left:50%; background-color: red; width: 100px; height: 100px; border: 1px solid #fff; margin-top: -50px;  margin-left: -50px;">asd</div>
</body>
</html>

Come vedete non faccio altro che usare un position: absolute; e un top: 50%; per centrarlo verticalmente e un left: 50%; per ottenere l'allineamento orizzontale. Per non avere problemi con altezze e larghezze statiche bisogna ricordare di metter sempre margin-top pari all'altezza / 2 e margin-left pari alla larghezza/2.

Spero di esservi stato utile, so che sembra semplice una volta detto ma arrivarci non è stato semplice, c'è chi vi consiglia di usare JS, chi il vertical-align (funziona ma con DIV di grandezza statica) e chi altri metodi esotici; Questo mi è sembrato il migliore.

^[DEL] GidanMX2 scrive:

Se darete una altezza al vostro div, per farlo rimanere allineato dovrete specificare nello stile:
margin-top: -(altezza_div/2);

^[DEL] Eduardo scrive:

Mio caro gidan, il problema dell'allineamento centrato di un div non è certo quello.

Prova a fare un test con
<div style="position:absolute; top: 50%; left:50%; background-color: red; display:block; width:200px; height:200px;">asd</div>

e capirai.

Il problema e centrarlo al centro "tenendo" presente le dimensioni del div. Per questo le soluzioni sono tante (ma il js è forse il metodo universale)

^[DEL] GidanMX2 scrive:

Per allineare quello basta dare:
<div style="position:absolute; top: 50%; left:50%; background-color: red; display:block; width:200px; height:200px; margin-left: -100px; margin-top: -100px;">asd</div>

^[DEL] Eduardo scrive:

Va be ci siamo capiti male, il mio commento è per far notare che il js è utilizzato per le altezze dinamiche del div

^[DEL] GidanMX2 scrive:

Per allineare DIV con altezza dinamica, potete usare questo esempio:
<div id="test" style="position:absolute; top: 50%; left:50%; background-color: red; width: 50%; height: 50%; border: 0; margin-left: -25%;" OnClick='javascript: document.getElementById("test").style.marginTop="-"+((document.documentElement.clientHeight*25)/100)+"px"'>asd</div>
Se clickate sul DIV si centrerà. (mettetelo OnLoad o esterno per automatizzare)

Powered By: