Centrer le texte verticalement

14 mai 2009, 08:43

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

14 mai 2009, 08:59

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.

14 mai 2009, 09:13

pour du multiligne tu dois créer un élément à l'intérieur le conteneur centre verticalement le contenu affiche

14 mai 2009, 09:28

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 :

Code : Tout sélectionner

<div class="divconteneur">
  test
</div>

Va centrer ton texte , même si c'est du multilignes ..

14 mai 2009, 09:41

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 :

Code : Tout sélectionner
<div class="divconteneur"> test </div>
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).

14 mai 2009, 09:42

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 ?

14 mai 2009, 09:45

artioche fais attention au post de victor qui souleve un point assez important je crois

14 mai 2009, 09:51

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 ?

14 mai 2009, 09:58

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

14 mai 2009, 10:13

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

14 mai 2009, 10:21

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>

CSS

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;
}

14 mai 2009, 11:04

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 */
}

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

14 mai 2009, 11:04

essayes ça:

HTML

Code : Tout sélectionner

<div id="container">
                		<div class="temoi_texte">«Bla bla bla bla bla tralalala»</div>
</div>

CSS

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

14 mai 2009, 11:32

@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é..

14 mai 2009, 11:39

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é) ?

Centrer le texte verticalement

Qui est en ligne