Page 1 sur 2
Centrer le texte verticalement
Posté : 14 mai 2009, 08:43
par Ariochs
Bonjour a tous.
Alors voila j'essaie de centrer mon texte verticalement dans ma div, malheureusement je n'y arrive pas..
J'ai essayé cette methode :
#nom_de_ma_div_txt {
height: 100px;
line-height: 100px;
vertical-align: middle;
}
Petit probleme, sa ne fonctionne que si j'ai une ligne..
Auriez vous une solution ?
Merci
Posté : 14 mai 2009, 08:59
par stopher
Salut ,
vertical-align , est valable uniquement pour des elements de type tableau ,
Pour un div , tu peux utiliser par exemple line-height en spécifiant sa valeur à la hauteur de ton div , ainsi , ton texte sera centré verticalement .
Il existe d'autres solutions .. plus .. "propres" mais je ne les connais pas ..
Ch.
Posté : 14 mai 2009, 09:13
par Nagol
pour du multiligne tu dois créer un élément à l'intérieur le conteneur centre verticalement le contenu affiche
Posté : 14 mai 2009, 09:28
par stopher
J'ai trouvé une autre solution plus "propre"
Ton div conteneur , tu le fais apparaitre comme une cellule , ainsi , tu peux utiliser vertical-align :
Code : Tout sélectionner
.divconteneur{
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
Ainsi , le code :
Va centrer ton texte , même si c'est du multilignes ..
Posté : 14 mai 2009, 09:41
par Victor BRITO
J'ai trouvé une autre solution plus "propre"
Ton div conteneur , tu le fais apparaitre comme une cellule , ainsi , tu peux utiliser vertical-align :
Code : Tout sélectionner
.divconteneur{
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
Ainsi , le code :
Va centrer ton texte , même si c'est du multilignes ..
Le seul inconvénient de cette solution est qu'elle n'est pas comprise des versions d'Internet Explorer antérieures à la 8.
vertical-align , est valable uniquement pour des elements de type tableau
Cette propriété s'applique également lorsqu'il s'agit d'aligner verticalement un élément en ligne par rapport à un élément en ligne voisin (comme une image par rapport au texte qui l'environne).
Posté : 14 mai 2009, 09:42
par Ariochs
Merci pour l'aide.
Stopher ta solution fonctionne (enfin si on est pas en absolu xD).
Du coup maintenant j'ai mon texte centré, mais plus decalé sur la gauche.. Voici ma css :
Code : Tout sélectionner
#temoi_texte {
margin-left : 125px;
height: 85px;
width: 415px;
font-size: 14px;
vertical-align:middle;
display:table-cell;
}
Vu que j'ai pris trop l'habitude de coder en absolu, c'est bien margin-left qui permet de decaler a gauche ?
Posté : 14 mai 2009, 09:45
par Nagol
artioche fais attention au post de victor qui souleve un point assez important je crois
Posté : 14 mai 2009, 09:51
par Ariochs
Oui j'ai vu après.. Du coup la solution me convient pas xD
pour du multiligne tu dois créer un élément à l'intérieur le conteneur centre verticalement le contenu affiche
Par contre j'ai pas trop compris ta phrase. En gros j'ai une div ou je lui dis d'être centré verticalement (avec une marge négative dont la valeur est exactement la moitié de la hauteur), et je crée une seconde div a l'interieur de celle ci ou je met mon texte ?
Posté : 14 mai 2009, 09:58
par Nagol
Oui j'ai vu après.. Du coup la solution me convient pas xD
pour du multiligne tu dois créer un élément à l'intérieur le conteneur centre verticalement le contenu affiche
Par contre j'ai pas trop compris ta phrase. En gros j'ai une div ou je lui dis d'être centré verticalement (avec une marge négative dont la valeur est exactement la moitié de la hauteur), et je crée une seconde div a l'interieur de celle ci ou je met mon texte ?
yap
le vertical-align opère à l'intérieur de l'élément et non pas sur l'élément lui même, donc ta solution initiale fonctionnerait presque, il manquerait juste un autre div à l'intérieur qui contiendrais ton texte. Personellement ceci dit je prefere mettre un position absolute, un top en % et un bottom en % dans ces cas la, toujours avec un modele div->div->texte
Posté : 14 mai 2009, 10:13
par agité
Même le line-height déconne parfois pour IE6, c'est ce qui m'est arrivé récemment j'ai du utiliser un padding pour faire le centrage
Posté : 14 mai 2009, 10:21
par Ariochs
Bon, en gros le bloc est centré, mais mon texte ne ce met pas au milieu du bloc..
Si j'ai un texte de deux ligne on vois que c'est pas centré, mais si mon texte fait tout le bloc, c'est niquel sa parait centré.. Mais vu que mon texte change regulierement.. Sa m'arrnage pas..
Si vous avez d'autres idée je suis preneur.. En attendant voici ce que j'ai fait :
HTML
Code : Tout sélectionner
<div id="container">
<div class="temoi_texte">«Bla bla bla bla bla tralalala»</div>
</div>Code : Tout sélectionner
#container {
position:absolute;
left: 125px;
top: 50%;
width: 415px;
height: 100px;
margin-top: -50px; /* moitié de la hauteur */
border: 1px solid #000;
}
.temoi_texte {
font-size: 14px;
}
Posté : 14 mai 2009, 11:04
par Victor BRITO
Pour les versions d'IE antérieures à la 8, une solution, inspirée de ce
billet, peut être la suivante :
Code (X)HTML
Code : Tout sélectionner
<div id="conteneur-1">
<div id="conteneur-2">
<div id="contenu">Ton texte à centrer verticalement</contenu>
</div>
</div>
CSS
Code : Tout sélectionner
#conteneur-1 {
height: 200px; /* Il faut une hauteur explicite, sinon ça ne marche pas */
position: relative; /* On positionne le conteneur */
}
#conteneur-2 {
position: absolute;
top: 50%;
/* On positionne cet élément en absolu à la moitié de la hauteur de l'élément parent positionné */
}
#contenu {
position: relative; /* On positionne le contenu... */
top: -50%; /* ... afin d'en ajuster l'alignement vertical */
}
Posté : 14 mai 2009, 11:04
par Nagol
essayes ça:
HTML
Code : Tout sélectionner
<div id="container">
<div class="temoi_texte">«Bla bla bla bla bla tralalala»</div>
</div>Code : Tout sélectionner
#container {
position:absolute;
left: 125px;
width: 415px;
height: 100px;
margin-top: -50px; /* moitié de la hauteur */
border: 1px solid #000;
}
.temoi_texte {
position:absolute;
font-size: 14px;
top: 50%;
}
tu utilises les propriétés css en pensant qu'elle s'applique au mauvais élément
Posté : 14 mai 2009, 11:32
par Ariochs
@Victor BRITO : Ta methode de fonctionne pas. Ma 1ere ligne de texte est centré, et le reste ce met a la suite, sans justifier le centrage du texte par rapport au contenu general. En gros ça revient a avoir une marge en hauteur..
@Nagol : Non déjà test avant, cette methode est incorrecte, sa positionne mon texte hors de la div (genre a 50% plus haut de la div xD)
Encore d'autres idée ? J'ai beau chercher je trouve rien.. Tout ce que je trouve c'est pour centrer un bloc par rapport a un autre, mais le texte ce mettra toujours en haut a gauche du bloc centré..
Posté : 14 mai 2009, 11:39
par Victor BRITO
mais le texte ce mettra toujours en haut a gauche du bloc centré..
Pourquoi ne mets-tu pas ce texte dans un élément mis en positionnement flottant (avec la propriété float) ou positionné en absolu (top: 0 et left: 0, le bloc centré devant alors être positionné) ?