Centrer un texte de haut en bas

**winow** · 17/08/2013, 12h10

bonjour
j'ai du mal a centrer le texte de haut en bas sur cette partie du code de mon menu, padding-top:10px ne fait rien, aucun effet sur la page ?

Code html :

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
 
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>menu nuage</title>
 
<style type="text/css">
div#coinpecheur {
                    float : left;
                    margin-top : 10px;
                    width : 105px;
}
div#cnpech {
              text-align : center;
              width : 201px;
              height : 30px;
              margin : 0 0 0 0;
              background-image : -webkit-linear-gradient(#fff, #19b6ff);
              background-image : -moz-linear-gradient(#fff, #19b6ff);
              background-image : -ms-linear-gradient(#fff, #19b6ff);
              background-image : -o-linear-gradient(#fff, #19b6ff);
              background-image : linear-gradient(#fff, #19b6ff);
              border-top-left-radius : 16px;
              border-top-right-radius : 16px;
              box-shadow : 1px 1px 1px 1px rgba(145, 221, 225, 0.5) inset, 1px 1px 1px 1px rgba(145, 221, 225, 0.5);
}
a#mcnpech {
             color : #fff;
             text-decoration : none;
             text-align : center;
             -moz-user-select:none;
             text-shadow : 1px 1px 1px #666;
}
</style>
 
</head>
<body>
 
<div id="coinpecheur">
 
<div id="cnpech"><a id="mcnpech">Le coin des pêcheurs</a></div>
 
</div>
 
</body>
</html>

une petite idée ?

**rodolphebrd** · 17/08/2013, 12h42

Bonjour,

vous pouvez utiliser la propriété line-height avec pour valeur la hauteur de la boite.

Code :

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

1
2
3
4
5
6
7
8
#mcnpech {
             color : #fff;
             text-decoration : none;
             text-align : center;
             -moz-user-select:none;
             text-shadow : 1px 1px 1px #666;
             line-height:30px;
}

http://codepen.io/maxwbailey/pen/gAyHD

**Candygirl** · 17/08/2013, 13h12

Bonjour,

Je ne vois pas le padding dont tu parles dans ton code ?
Pourquoi attribues-tu une hauteur fixe à ton onglet (30px) et ne le laisse-tu pas s'adapter en fonction de ton texte (+ padding) ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
div#cnpech {
              text-align : center;
              width : 201px;
			  padding:0.4em 0;
              background-image : -webkit-linear-gradient(#fff, #19b6ff);
              background-image : -moz-linear-gradient(#fff, #19b6ff);
              background-image : -ms-linear-gradient(#fff, #19b6ff);
              background-image : -o-linear-gradient(#fff, #19b6ff);
              background-image : linear-gradient(#fff, #19b6ff);
              border-top-left-radius : 16px;
              border-top-right-radius : 16px;
              box-shadow : 1px 1px 1px 1px rgba(145, 221, 225, 0.5) inset, 1px 1px 1px 1px rgba(145, 221, 225, 0.5);
}

Perso je n'ai jamais été fan d'un centrage avec le line-height dans des cas où le texte a un risque de passer sur 2 lignes.

**rodolphebrd** · 17/08/2013, 13h18

Envoyé par Candygirl

Perso je n'ai jamais été fane d'un centrage avec le line-height dans des cas où le texte a un risque de passer sur 2 lignes.

Intéressant, je n'avais pas pensé à ça sachant que le problème ne s'est jamais rencontré.
En lisant ton post, j'ai pensé que tu n'étais pas fané

**Candygirl** · 17/08/2013, 13h21

Merci de la correction. "Fan" au féminin n'existe pas

Et non suis pas encore fanée :p

**winow** · 17/08/2013, 14h58

Merci pour vos réponses, effectivement, c'est le height : 30px; qui n'allait pas,
j'ai rectifié et tout est ok.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div#cnpech {
              text-align : center;
              width : 201px;
              margin : 0 0 0 0;
              padding:4px;
              background-image : -webkit-linear-gradient(#fff, #19b6ff);
              background-image : -moz-linear-gradient(#fff, #19b6ff);
              background-image : -ms-linear-gradient(#fff, #19b6ff);
              background-image : -o-linear-gradient(#fff, #19b6ff);
              background-image : linear-gradient(#fff, #19b6ff);
              border-top-left-radius : 16px;
              border-top-right-radius : 16px;
              box-shadow : 1px 1px 1px 1px rgba(145, 221, 225, 0.5) inset, 1px 1px 1px 1px rgba(145, 221, 225, 0.5);
}