1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

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:
    8 874
    J'aime reçus:
    262
    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 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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice