J’étais entrain d’intégrer mon site perso (patience ça vient lol), lorsque j’ai eut besoin de centrer verticalement un div dans un autre. Et pour le faire correctement tout en CSS et divs (sans tableaux), pour que ça soit valide et compatible avec tous les navigateurs, ce n’est pas si simple. J’ai donc décidé de vous faire un petit tuto pour vous montrer la solution que j’ai utilisé et qui marche parfaitement (n’hésitez pas à proposez d’autres méthodes en commentaire).
Le principe de la méthode
Tout d’abord nous avons deux divs que j’ai nommé « container » et « content ». Le div « content » sera centré dans le div « container ».
Pour centrer verticalement un div dans un autre, nous allons avoir besoin d’un div supplémentaire « temp » de hauteur de 1px et qui sera positionné à top : 50% du div container. ce « temp » contiendra donc le div « content » qui sera positionné à top:-50% de sa hauteur. Et comme par magie, il sera centré verticalement par rapport au div « container ».
Travaux Pratiques :
Le code XHTML correspondant est donc le suivant :
.
.
.
<div id="container">
<div id="temp">
<div id="content">
Contenu du div à centrer
</div>
</div>
</div>
.
.
.
Comme vous le voyez, le div « container » contient le div « temp » qui contient le div « content ».
Passons maintenant au code CSS correspondant :
.
.
.
#container {
height:500px;
width:700px;
position: relative;
}
#temp {
position:absolute;
height:1px;
overflow: visible;
top:50%
}
#content {
position:absolute;
height:200px;
width:200px;
top:-100px;
}
Vous avez surement remarqué le « overflow:visible » du div « temp » qui permet d’afficher ce qui dépasse puisque sa hauteur n’est que de 1px.
Résultat :
Voila ce petit tutorial est terminé, si vous avez des questions ou autre, n’hésitez pas.
Pingback: Tutoriels usto » Archive du blog » Centrer un bloc dans un autre verticalement en CSS
Hello,
Merci pour l’astuce, elle est intéressante lorsqu’on ne connaît pas à l’avance le height de #container.
Dans le cas contraire, on peut se passer de #temp et calculer la position de #content avec (height_container – height_content ) / 2, ce qui donne ici top:150px pour #content ici.
@oelmekki en effet, dans l’exemple j’ai fixé le height du container, mais en réalité cette solution est surtout utile dans un container de taille variable (100% par exemple pour s’adapter à la résolution).
Merci pour la contribution.
y a aussi la technique des marges négatives dans le cas où le design est fixe et non fluide, il suffit de définir une largeur pour le « content », et d’appliquer des marges négativement égales à la moitiée de la largeur et hauteur genre :
#content {
width:960px;
height: 600px;
margin-top: -300px;
margin-left: -480px;
left: 50%;
top: 50%;
}
Mais faut hacker pour les anciennes version de IE
@stan t’as vu ça ou? parce que ça ne marche même pas sous Firefox!
déjà je ne comprend pas grand chose à ce petit bout de code!
faut-il ajouter d’autres conditions ou juste le div #content sera centré dans un body tranquillement (sans autres contraintes)??
Amicalement Inalgnu.
@Inal : J’ai omis de préciser qu’il faut ajouter « position:absolute; »
Tu insère le div #content dans ton body, et tu accroche le CSS, ça devrait marcher
@stan oui voila je m’en douté, vu que tu utilisais du TOP et LEFT! mais ça reste incomplet, coté internet explorer, même si c’est plus simple!
Eh bien coté Internet Explorer ça marche perfecto sous IE7 et IE6 avec Windows, mais inférieur à IE6, ça ne marche pas.
Sachant pertinemment que tu es un linuxien,je présume qu’il doit y avoir des problèmes avec IE sous linux, pour ma part, j’ai pu vérifier que sous MAC, effectivement, il y a un problème avec IE, peut etre que Riad pourrait nous confirmer cela.
Salut,
Personnellement, je ne suis pas un fan de la position abslolute, car elle peut résulter certains problèmes sur IE ^^ »
Je n’ai pas testé, mais comme tu as des tailles fixes, je pense que tu pourrais utiliser le margin: auto; ça permettrait normalement (j’ai pas essayé) de centrer verticalement et horizontalement ton bloc dans le container. Faut voir
@Kadus Salut, Certes les tailles sont fixes dans l’exemple mais si tu avait lu les commentaires précédents t’aurait compris que c’est juste pour l’exemple la solution marche même si tu a des tailles en % par exemple.
@Kadus : quels problèmes tu as sur ie avec position:absolute ?
@oelmekki : Personnellement, je n’en ai pas eu, mais j’ai vu sur plusieurs forum des personnes ayant des problèmes sur ie6 à cause de la position: absolute. Donc je me suis dit que je dois éviter un maximum son utilisation.
~Youknowriad, à d’accord c’est vrai que je n’ai fait que survoler les commentaires ^^; désolé. En tout cas merci, c’est toujours bien d’avoir une petite astuce sous le coude
J’ai une question: comment mettre une balise div en bas de sa page, quand la page ne dépasse pas la taille de l’écran? ( pour que cela se passe dans tout les écrans)
Merci d’Avance.
@3arbi tu veux que ça soit en bas de la page ou en bas de l’écran(c’est à dire que ta page doit occuper tout l’écran – le div est collé au bas de la fentetre du navigateur -) ?
@ youknowriad: Oui c exactement ca, meme si la page ne dépasse pas la taille de l’écran, il faut que la balise div soit en bas. Merci d’avance
@3arbi Voici une solution (mais attention j’ai pas testé sur tous les navigateurs), tu peux modifier la hauteur du div « content » pour voir :
http://youknowriad.nomade-dz.com/test.htm
Tu peux regarder le code source pour voir, J’en ferai peut être un tuto de ce problème la
Ca ne marche toujours pas, peut etre que ca marche dans ton ecran (ce qui est normale) mais chez moi non. j’ai essayé de metre a CENTENT une hauteur de 100%, et de mettre en dessous notre div , mais ca ne marche pas.
En tout cas merci pour la réponce.
@3arbi mais non il ne faut pas mettre 100% dans la hauteur de content, normalement il ne faut rien mettre en hauteur du content puisqu’il s’adapte à son contenu. (si tu veux être sur de la solution tu peux essayer différentes hauteurs de content en pixels)
Mais j’ai pas compris ce que tu voulais dire par mettre en dessous. Tu ne voulais pas le footer en dessous !!!
Mais la solution marche très trés bien !!! j’ai pu vérifié sur Firefox, Safari et Opéra
@3arbi bon je viens de rajouter un petit hack pour faire marcher sous IE, donc pb réslolu.
Merci riad, effectivement c résolu :bien:
Salut,
Concernant l’alignement vertical, est ce qu’un position:relative; top:50%; ne marcherait pas ?
@Kadus C’est possible mais ceci ne vas pas centrer le div mais plutôt positionner son bord haut sur le centre du conteneur.
ce code centre le block content parfaitement
#content {
position:peut importe;
width:200px;
margin:0 auto ;
}
@Ahmed la solution que tu as donné centre le div horizontalement (ce qui est très facile) et non verticalement.
J’ajoute aussi que pas besoin de mettre la propriété position pour centrer avec la technique de margin:auto
Salut,
Je pense que ta technique est plus complexe, on peut procéder simple sans avoir recours au positions absolute, relatif.
tout simplement pour le div intérieur, (incu dans un autre), on ajoute les propriété suivante:
margin:0px auto;
padding:0px auto;
Et c’est tout
Bonne utilisation
@safwen ta solution est bonne mais elle ne marche pas sur IE6 qui est un vrai casse tête pour tous les développeurs, (encore une année voir deux de galère)