Alignement vertical en CSS
Bonjour,
J'ai un div qui occupe une hauteur de 10% de ma page. Dans ce div j'ai une ligne de texte.
J'aimerais la centrer verticalement.
Si mon div était dimensionnée en pixels, pas de problemes, avec un line-height de la meme valeur que la hauteur de ma div, ca fonctionne.
Cependant je DOIT garder la hauteur de celui ci en %, et du coup, l'alignement vertical ne marche pas.
Quelqu'un a t'il une idée pour solutionner ce problème ?
Merci d'avance, bon codage !
J'ai un div qui occupe une hauteur de 10% de ma page. Dans ce div j'ai une ligne de texte.
J'aimerais la centrer verticalement.
Si mon div était dimensionnée en pixels, pas de problemes, avec un line-height de la meme valeur que la hauteur de ma div, ca fonctionne.
Cependant je DOIT garder la hauteur de celui ci en %, et du coup, l'alignement vertical ne marche pas.
Quelqu'un a t'il une idée pour solutionner ce problème ?
Merci d'avance, bon codage !
5 réponses
-
Enchanté,
Toujours pas d'idées ? -
salut
essaie d'éviter de mettre une hauteur en pourcentage sur une div
Tu peux mettre
height:auto;
c'est mieux :° -
sinon ce que tu peux faire, c'est à l'intérieur de ta div, tu peux mettre un tableau en précisant height: 100%
avec une ligne <tr> et une cellule <td valign="middle">
J'espere avoir pu t'aider ;) -
Enchanté,
Je DOIT garder ce div avec une hauteur en %, je me lance ds la construction de site en %, tout est calé, mon site s'adapte bien a toute les résolutions d'écran.
J'ai essayé de bidouiller avec un tableau dans ce div, mais ca ne fonctionne pas.
D'autres idées ? -
Ce n'est pas le div que je veut centrer, c'est le texte CONTENU dans ce div.
Merci quand meme.-
Le principe est le même.
Tu met le texte dans un div qui sera donc invisible et tu le centre dans son container.
Par exemple, si tu avait un code de ce genre:<div class="bloc"> <p>texte</p> <p>texte</p> </div>
Si tu veux centrer le texte dans le div bloc, il te suffit de procéder comme suis:<div class="bloc"> <div class="cent_vert"> <p>texte</p> <p>texte</p> </div> </div>
Après tout ce joue dans le CSS:div.cent_vert{position:relative; top:50%;margin-top:-x%;}
Le x est à remplacer par la moitié de la hauteur du texte.
-
