18041 sujets

Questions générales et questions de débutants

[Résolu] Centrage vertical avec width/height du conteneur à 100%

Bonjour,
Je cherche à centrer une bête image dans un div qui occupe toute la zone cliente restante de ma page (j'ai un menu en haut et un à gauche). Je veux que ça marche sous Firefox et Chrome, aucun utilisateur IE. Je voudrais éviter les soluces à base de marges négatives.

J'ai testé des dizaines d'exemples mais aucun qui fonctionne correctement quand le conteneur a ses width et height = 100%. Je voudrais bien comprendre pourquoi.

Voici un exemple. Ceci marche nickel :


<!doctype html>
<head>
	<style>
		html,body {
			margin: 0;
			height: 100%;
			width: 100%;
		}
		
		div#centeronpage {
			text-align: center;

			width: 500px;
			height: 500px;
/* */

/*
			width: 100%;
			height: 100%; 
/* */
			
			vertical-align: middle;
			display: table-cell;
			border: 1px solid red;
			
		}
		
		img {
			width: 128px;
			height: 128px;
		}
	</style>
</head>

<body>
	<div id="centeronpage">
		<img src="ajax_loader_blue_128.gif" />
	</div>
</body>


Cela ne marche pas du tout :


<!doctype html>
<head>
	<style>
		html,body {
			margin: 0;
			height: 100%;
			width: 100%;
		}
		
		div#centeronpage {
			text-align: center;
/*
			width: 500px;
			height: 500px;
/* */


			width: 100%;
			height: 100%; 
/* */
			
			vertical-align: middle;
			display: table-cell;
			border: 1px solid red;
			
		}
		
		img {
			width: 128px;
			height: 128px;
		}
	</style>
</head>

<body>
	<div id="centeronpage">
		<img src="ajax_loader_blue_128.gif" />
	</div>
</body>


Merci de votre aide.
Salut essaye comme ça :

<!doctype html>
<head>
	<style>
		html,body {
		margin: 0px;
			height: 100%;
			width: 100%;
		}
		
		div#centeronpage {
			text-align: center;
			width: 100%;
			height: 100%; 			
			vertical-align: middle;
			border: 1px solid red;
			display:table-cell;
		}
				
		div#wrapper {
			width: 100%;
			height: 100%; 			
			display:table;
		}
				
		img {
			width: 128px;
			height: 128px;
		}		
		
	</style>
</head>

<body><div id="wrapper">
	<div id="centeronpage">
		<img src="ajax_loader_blue_128.gif" />
	</div></div>
</body>
Sujet clos
Aller à