Centrer verticalement dans un div [Résolu]

[koKoTis]

Bonjour, est-il possible de centrer un texte verticalement dans un div ?

Si oui comment ?

[koKoTis]

J'ai ajouter ceci dans mon css, mais ca ne fonctionne pas:

Code :

   vertical-align:text-bottom;

Je vous donne le css complet du div au cas ou:

Code :

1
2
3
4
5
6
7
8
9
10
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   text-align:center;
   vertical-align:text-bottom;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}

[Bisûnûrs]

Il va falloir que tu apprennes à faire des recherches sur les forums ..

Dernière discussion parmi les 150 existantes sur le sujet :
http://www.developpez.net/forums/d10...cal-texte-div/

[koKoTis]

Merci

J'ai fait des recherche google, j'ai tester plusieurs truc mais rien n'a fonctionner.

J'ai donc ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   text-align:center;
   margin:0;
   line-height:1.1; /* rétablir le line-height */
   display:inline-block;
   vertical-align:text-bottom;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}

Mais le texte reste en haut

[Bisûnûrs]

Je te laisse (re)lire la discussion.
Je te laisse (re)faire des recherches sur le forum.

Faut pas pousser mémé dans les orties.

[koKoTis]

Désolé, j'avai mal regarder.

Donc maintenant j'ai ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   text-align:center;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
 
.h1 {
   margin:0;
   line-height:1.1; /* rétablir le line-height */
   display:inline-block;
   vertical-align:text-bottom;
}

Mais là le texte et au milieux, je le voudrai en bas du div

[Bisûnûrs]

Envoyé par koKoTis

Bonjour, est-il possible de centrer un texte verticalement dans un div ?

Pourtant mes yeux ne me jouent pas des tours.

Je te laisse chercher comme un grand les valeurs que peut prendre la propriété vertical-align et à quoi elles correspondent vraiment.

[koKoTis]

Quand je disait centrer je voulais dire aligner pardon

J'ai essayer bottom tout cour ca ne fonctionne pas

[Bisûnûrs]

Envoyé par 12monkeys

il suffit de rajouter display:table-cell;

[koKoTis]

J'ai donc ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
 
.h1 {
   margin:0;
   line-height:1.1; /* rétablir le line-height */
   display:table-cell;
   vertical-align:bottom;
}

Mais le texte reste au milieux

[Bisûnûrs]

Code html :

<div>Du texte</div>

Code :

1
2
3
4
5
div {
   height : 100px;
   display : table-cell;
   vertical-align : bottom;
}

Ca fonctionne, je te laisse l'arranger à ta sauce.

[koKoTis]

Merci encore

Je vien de voir une erreur que j'vai fait.

J'avais mis:

Code :

1
2
3
4
5
6
.h1 {
   height : 100px;
   display : table-cell;
   vertical-align : bottom;
 
}

Au lieu de:

Code :

1
2
3
4
5
6
h1 {
   height : 100px;
   display : table-cell;
   vertical-align : bottom;
 
}

Un poins en trop devant h1.