Problème d'alignement vertical en css

soulflow132 · 14 Septembre 2010

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:
.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:
<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 · 14 Septembre 2010

Met un plus grand margin-top

smorge · 14 Septembre 2010

Remplace simplement vertical-align:middle; par :
Code:
line-height : 30px;
Ca devrait marcher pour ACCUEIL, par contre le texte du second bouton va être un peu à l'étroit dans 100px

CARREZ · 14 Septembre 2010

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 · 15 Septembre 2010

CARREZ a dit:

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.
Cliquez pour agrandir...

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

Similar Threads - Problème alignement vertical	Forum	Date
probleme alignement bouton en html	Développement d'un site Web ou d'une appli mobile	14 Décembre 2010
menu horizontal défilant en css...un problème d'alignement	Développement d'un site Web ou d'une appli mobile	1 Novembre 2010
Problème de déclencheur avec une balise GTM	Google Analytics	Lundi à 15:45
probleme de redirection 301 certbot	Administration d'un site Web	12 Janvier 2020
Problème avec Letsencrypt	Administration d'un site Web	11 Janvier 2020
Problème avec les données démographiques dans Google Analytics	Google Analytics	11 Janvier 2020
Astuce Problème avec Screaming Frog	Problèmes de référencement spécifiques à vos sites	5 Janvier 2020
Problème rediretion https avec les www	URL Rewriting et .htaccess	29 Décembre 2019
WordPress Problème référencement depuis passage Joomla sur Wordpress	Problèmes de référencement spécifiques à vos sites	19 Décembre 2019
Problème de référencement site internet	Problèmes de référencement spécifiques à vos sites	17 Décembre 2019