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 migration site vistaprint vers wordpress.com	Débuter en référencement	3 Juillet 2020
Problème e-commerce sur GA/GTM	Google Analytics	18 Juin 2020
Problème de pages exclues	Crawl et indexation Google, sitemaps	10 Juin 2020
Site E-Commerce : Problème Page De Collection	Problèmes de référencement spécifiques à vos sites	5 Juin 2020
Problème de coupure en hebergement mutualisé	Demandes d'avis et de conseils sur vos sites	30 Mai 2020
Problème htaccess	Développement d'un site Web ou d'une appli mobile	26 Mai 2020
Search Console Problème indexation très faible	Crawl et indexation Google, sitemaps	19 Mai 2020
Problème de preg_match().	Développement d'un site Web ou d'une appli mobile	15 Mai 2020