Discussion :

[soulflow]

Bonjour,
J'ai essayé de créer des boutons sur mon site web en utilisant un arriere plan en gris et du texte dessus selon le code suivant.

Code css

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
 
.bouton_menu a {
  display:block;
  color: white;
  background-color: #4b4b4b;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  vertical-align:middle;
  width: 100px;
  height:30px;
  font-size:10px;
  float:left;
  margin:2px 2px 0px 2px;  
}
.bouton_menu a:hover 
{
	 background-color: Gray;
	text-decoration:none;
}

Code html

Code :

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

1
2
3
4
 
<div class="bouton_menu">
<a href='index.php'>ACCUEIL</a><a href='index.php?action=installation'>INSTALLATION TARIFS</a>
</div>

Le problème et que l'alignement vertical est sans effet . Le texte accueil est tout a fait en haut du bouton alors que j'aimerais qu'il soit verticalement centré.

SVP comment faire pour régler cela ?

Merci,
Bonne journée

[sebhm]

Bonjour,

si tu veux utiliser 'vertical-align', selon la faq, il faut préciser la hauteur de la ligne de texte :

Code :

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

  line-height : 30px;

(à ajouter dans .bouton_menu a)

mais un libellé sur 2 lignes pose probleme, car tu n'alignes pas vraiment le texte dans le bouton, mais le texte dans une ligne : il faudra donc augmenter la taille du Div (width) pour corriger le probleme.

Si tu veux un bouton avec un texte sur 2 lignes, il faut changer le code HTML

[Mahefasoa]

Bonjour,

Le seul souci pour line-height, c'est quand le texte a plus d'une ligne.
Sinon, pour vertical_align, c'est une directive qui est plutôt attribué aux éléments de type inline et non de type bloc.(Cf. http://www.w3.org/TR/REC-CSS1/#vertical-align). Pourtant, on peut bien l'adapter à d'autres éléments, dont voici une démonstration sur cette page.
Bien cordialement,