28172 sujets

CSS et mise en forme, CSS3

Centrage vertical fluide

Bonjour,
J'essaie de centrer verticalement un div de taille variable contenu dans un div de taille également variable. J'ai suivi le tuto correspondant : http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
Mais en appliquant la dernière technique mon div n'est toujours pas centré. Voici mon code html :

<body>
<div id="container">
<div id="bloc">
<p id="text">Kiwi</p>
</div>
</div>
</body>

Et voici le code css :

<style>
html{
height: 100%;
}
body{
font-family : TAHOMA;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#container{
height: 80%;
width: 80%;
text-align: center;
background: blue;
}
#bloc{
width: 50%;
height: 50%;
display: inline-block;
vertical-align: middle;
background: orange;
}
</style>

Voyez vous ou est le problème ?

Merci pour votre aide !
Modérateur
Bonjour,

Il est amusant de constater qu'on n'arrive toujours pas (en 2015) à centrer verticalement un bloc sans prise de tête. Celui qui a oublié d'inventer "margin:auto" dès le début du web n'a pas gagné sa journée !

Ton exemple ne marche pas car quand on utilise display: inline-block + vertical-align: middle, il faut aussi mettre un line-height ayant pour valeur la hauteur du conteneur. Or, comme les blocs sont ici de tailles variables, on ne peut pas y arriver, car rien ne permet d'indiquer que le line-height d'un conteneur vaut 100% de la hauteur dudit conteneur .

Quand tout est variable, on peut (en 2015) utiliser la propriété flex couplée à un margin:auto qui est de mieux en mieux supportée. Par exemple (les lignes avec le prefixe -webkit- sont pour safari et ios) :


html
{
	height:100%;
}
body
{
	font-family:TAHOMA;
	margin:0;
	padding:0;
	text-align:center;
	height:100%;
	width:100%;
	background:#fcc;
	/* ça commence vraiment ici */
	display:-webkit-flex;
  	display:flex;
}
#container
{
	height:80%;
	width:80%;
	background:blue;
	/* ça commence vraiment ici */
	display:-webkit-flex;
	display:flex;
	margin:auto;
}
#bloc
{
	width:50%;
	height:50%;
	background:orange;
	/* ça commence vraiment ici */
	display:-webkit-flex;
	display:flex;
	margin:auto;
}
#bloc p
{
	/* ça commence vraiment ici */
	margin:auto; 
}


Amicalement,
Modifié par parsimonhi (07 Dec 2015 - 05:23)
Sujet clos
Aller à