Tiny File Manager

Back Back Up Advanced Editor

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Un bloc centr� horizontalement et verticalement dans la page</title>
	<style media="screen">

/* IMPORTANT */
	html {
		height: 100%;
	}
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#page-table {
		height: 100%;
		width: 100%;
		border-collapse: collapse;
		text-align: center;
	}
	#page-td {
		height: 100%;
		padding: 0;
		vertical-align: middle;
	}
	div#global {
		width: 500px;
		margin: 20px auto;
		text-align: left;
	}

/* COSM�TIQUE */
	body {
		background: #222;
	}
	#page-table {
		background: #111;
		color: white;
	}
	#page-table a {color: white;}
	div#global {
		padding: 10px 20px;
		background: #553;
		border: 1px solid black;
		font-family: Arial, Helvetica, sans-serif;
	}
	div#global h1 {font-size: 1.4em;}
	div#global h2 {font-size: 1.1em;}
	div#global p, div#global ul {font-size: .9em;}

</style>
</head>

<div id="global">
	<h1>Un bloc centr� horizontalement et verticalement dans la page � exemple 2</h1>

<p>Ce bloc est centr� dans la page:</p>
	<ul>
		<li>horizontalement, tant que la zone de visualisation du navigateur est plus large que ce bloc;</li>
		<li>verticalement, tant que la zone de visualisation du navigateur est plus haute que ce bloc.</li>
	</ul>

<h2>Compatibilit�</h2>
	<p>Test� avec Internet Explorer 5.01, 5.5, 6 et 7, Mozilla Firefox 2, Opera 9.25 et Safari 3.</p>
	<p>Consultez le code source de la page ou <a href=".">les explications</a>.</p>
</div>

</td></tr></table>

</body>
</html>