Problème d'alignement vertical en css

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par soulflow132, 14 Septembre 2010.

  1. soulflow132
    soulflow132 Nouveau WRInaute
    Inscrit:
    14 Septembre 2010
    Messages:
    1
    J'aime reçus:
    0
    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,
     
    #1 soulflow132, 14 Septembre 2010
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 170
    J'aime reçus:
    344
    Met un plus grand margin-top
     
    #2 spout, 14 Septembre 2010
  3. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    439
    J'aime reçus:
    0
    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 :)
     
    #3 smorge, 14 Septembre 2010
  4. CARREZ
    CARREZ WRInaute discret
    Inscrit:
    12 Mai 2006
    Messages:
    73
    J'aime reçus:
    0
    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.
     
    #4 CARREZ, 14 Septembre 2010
  5. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    439
    J'aime reçus:
    0
    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...
     
    #5 smorge, 15 Septembre 2010
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
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 alignement d'un div en css Développement d'un site Web ou d'une appli mobile 26 Juin 2008
[CSS] Problème d'alignement sous IE... Développement d'un site Web ou d'une appli mobile 14 Mai 2007
[]résolu] Problème simple d'alignement d'images dans des div Développement d'un site Web ou d'une appli mobile 15 Avril 2007
[CSS] Problème d'alignement sous Firefox (OK avec IE) Développement d'un site Web ou d'une appli mobile 18 Octobre 2006
Problème alignement texte menu horizontal Développement d'un site Web ou d'une appli mobile 21 Novembre 2005
probleme avec alignement de cellule Problèmes de référencement spécifiques à vos sites 29 Août 2005
problème d´alignement => CSS Administration d'un site Web 20 Juin 2005
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022
Problème d'indexation de backlinks Problèmes de référencement spécifiques à vos sites 21 Juillet 2022
Probleme de visibilité de ma page Facebook Facebook 5 Juillet 2022
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022