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,
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 023
    J'aime reçus:
    291
    Met un plus grand margin-top
     
  3. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    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 :)
     
  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.
     
  5. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    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...
     
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 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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice