Discussion :

[babylone_59]

Bonjour
Voila j'aimerai savoir comment centrer verticalement le texte dans mon menu horizontale, de façon a ce que ce soit plus joli.
Pour etre plus clair , je possede un menu horizontal avec 5 boutons.
Dans certains bouton le texte est ecri sur 2 lignes et dans d'autres sur une.
J'aimerai centrer mon texte au milieu de mon bouton(horizontalement et verticalement)
Merci de votre aide

[cedsun]

il faudrait que tu nous montres le code de ton menu

[babylone_59]

le voici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
 
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
 
}
#menuh {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menuh dl {
float: left;
width: 107px;
height: 20px
 
}
#menuh dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #039;
border: 1px solid gray;
margin: 1px;
 
}
#menuh dd {
display: none;
border: 1px solid gray;
}
#menuh li {
text-align: center;
background: #fff;
 
}
#menuh li a, #menuh dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
 
}
#menuh li a:hover, #menuh li a:focus, #menuh dt a:hover, #menuh dt a:focus {
background: #06f;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
</style>

j'ai essayé d'inserer un vertical-align:center; mais sa n'a rien changé

[zg2pro]

Non ca ne change rien.

Tu dois utiliser le line-height:

Tes boutons ont une hauteur de 20px

height: 20px

Si tu veux que tes textes soient alignes alors lorsque tu n'as qu'une seule ligne de texte dans le bouton tu ajoute la hauteur de ligne 20px, si c'est en 2 lignes alors la taille de chaque ligne doit etre la moitie de la taille du bouton: 10px

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.li_one_line {
line-height: 20px;
}
.li_two_lines {
line-height: 10px;
}

Et tu ajoutes tes classes de style dans le html.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<li class="li_two_lines"><a href="#1">TEXTE LONG POUR UN BOUTON</a></li>
<li class="li_one_line"><a href="#2">PTI TEXT</a></li>

(le message est vieux mais ca peut toujours etre utile a qqun^^)