1. Pour Black Friday on FRACASSE les prix ⚡ avec RM Tech Découverte ✅
    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,
     
    #1 soulflow132, 14 Septembre 2010
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 098
    J'aime reçus:
    301
    Met un plus grand margin-top
     
    #2 spout, 14 Septembre 2010
  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 :)
     
    #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:
    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...
     
    #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 calcul d'offset UTC par getTransitions ou DateTime. Développement d'un site Web ou d'une appli mobile Samedi à 12:50
Probleme indexation site web Crawl et indexation Google, sitemaps 16 Novembre 2020
Problème d'indexation Google (pages non indexées) Crawl et indexation Google, sitemaps 7 Novembre 2020
Search Console Problème d'indexation sur la search console Problèmes de référencement spécifiques à vos sites 3 Novembre 2020
Analytics et GTM : problème TAG Google Analytics 2 Novembre 2020
Problème page destination groupe d'annonces Google Ads AdWords 26 Octobre 2020
Problème de trafic incorrect (plus de 3000€) / RPM à 35€ AdSense 23 Octobre 2020
Problèmes d'indexations de Google Crawl et indexation Google, sitemaps 19 Octobre 2020