Centrare pagina web verticale

snaps

Centrare pagina web verticale

Salve

Questo e' la mia prima domanda nel forum. Ho consultato il forum per diversi anni.

Ho pocco tempo e devo centrare una pagina web (altezza ca 800 px) verticale (e orizontale) che funziona con tutti risoluzioni e in tutti browser.

E' possibile usando solo css (niente: js o <table>)?

Grazie.

claudio.c

Ciao,
ti segnalo questa utilissima risorsa: ww.jakpsatweb.cz/css/css-vertical-center-solution.html.

manetta

Prova così:

html, body {
	height: 100%;
}

#contenuti {
	width: 100px;
	height: 100px;
	text-align: center;
	border: 1px solid #000000;
	background-color: #7F7F7F;
	color: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

naturalmente creerai nell'html un div con ID "contenuti".

Ciao

snaps

Grazie

Ho provato con il codice qui sotto. Il problema e' che se la risoluzione dello schermo e' 1024x768 il contenuto della pagina viene tagliata in cima....

#contentbox {
position:absolute;
top:50%;
left:50%;
width:1000px;
height:800px;
margin-left:-500px;
margin-top: -400px;
padding:0;
}

Devo ancora provare la soluzione di jakpsatweb.cz

claudio.c

Sicuramente, è l'unico svantaggio dell'utilizzo di questa tecnica.
Comunque per sicurezza io mi terrei sui 960px (larghezza).

gabriele1986

Se vuoi centrare il contenuto all'interno della pagina puoi fare una cosa creare un div che chiamerai conenitore a questo dai una larghezza fissa es 940px se è per schermi a 1024 e gli setti i margini in questo modo: margin:0 auto 0 auto


<head>
<title>Esempio Div</title>
<style type="text/css">
#content{
heigth:200px;
width:940px;
border:5px solid green;
margin:0 auto 0 auto; / setta a 0 i margini top e bottom ed assegna un valore automatico a quelli dx e sx centrando la pagina.
Quì c'è il codice
}
</style>
</head>
<body>
<div id="content">
<div id="up">Test 1</div>
<div id="lf">Test 2</div>
<div id="rg">Test 3</div>
<div id="dw">Test 4</div>
</div>
</body>
</html>