Problème d'alignement vertical en css

[soulflow132]

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: Tout sélectionner

.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: Tout sélectionner

<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,

[spout]

Met un plus grand margin-top

[smorge]

Remplace simplement vertical-align:middle; par :

Code: Tout sélectionner

line-height : 30px;

Ca devrait marcher pour ACCUEIL, par contre le texte du second bouton va être un peu à l'étroit dans 100px

[CARREZ]

Il suffit d'ajouter un padding sur les liens, par exemple : padding: 8px;
ou padding: 8px 12px; pour différencier le padding vertical de l'horizontal.

Du coup le height est inutile, vertical-align aussi.

[smorge]

Il suffit d'ajouter un padding sur les liens, par exemple : padding: 8px;
ou padding: 8px 12px; pour différencier le padding vertical de l'horizontal.
Du coup le height est inutile, vertical-align aussi.

Je pense qu'avec un line-height de même dimension que le height du bouton tu as moins d'inconnues ? Tu es forcément centré en hauteur quelque soit la taille de la police ou la famille de police utilisée en remplacement par un visiteur et quand tu modifie ton bouton tu n'as pas à recalculer tous tes padding en tatônnant visuellement...