Eléments centrés verticalement dans les barres d'outils html/css

Question

J'ai deux barres de boutons - chacune contient des liens, mais une contient également un bouton de soumission d'une certaine hauteur. Celui avec le bouton soumettre a tous les éléments centrés verticalement. Je veux que l'autre barre de boutons, sans le bouton de soumission, se ressemble, donc je lui ai donné une hauteur explicite. Cependant, les liens à l'intérieur sont alignés sur le haut plutôt que sur le milieu.

Que se passe-t-il ici, et comment puis-je faire des barres de liaison d'une hauteur constante, avec des éléments centrés verticalement?

HTML:

<div class="link-bar"> 
    <input type="submit" value="Save"/> 
    <a href="#">link</a> 
    <a href="#">link</a> 
</div> 

<div class="link-bar"> 
    <a href="#">link</a> 
    <a href="#">link</a> 
</div> 

CSS:

input[type='submit'] { 
    width:100px; 
    height:40px; 
    border:solid red 1px; 
} 
.link-bar { 
    height:40px; 
    background:#EEE; 
    border:blue 1px solid; 
    margin:10px; 
    vertical-align: middle; 
} 

Voir jsFiddle par exemple

Answer 1

Ajoutez simplement line-height égal au height. Par défaut, tout texte sur cette ligne sera centré verticalement. L'exception se produit si vous enveloppez le texte dans une nouvelle ligne.

http://www.w3.org/wiki/CSS/Properties/line-height

J'ai aussi retiré votre vertical-align comme il est superflu de contenu dans des éléments de niveau bloc. It only applies to inline elements.

.link-bar { 
    height: 40px; 
    background: #EEE; 
    border:blue 1px solid; 
    margin: 10px; 
} 

.link-bar a { 
    line-height: 40px; /* equal to the height of the container */ 
} 

DEMO:

http://jsfiddle.net/SLqbk/9/

Answer 2

Utilisez la propriété line-height.

.link-bar a { 
    line-height: 40px; 
} 

http://jsfiddle.net/SLqbk/7/

Answer 3

Ajouter à votre css

.link-bar a {line-height: 40px; } 

http://jsfiddle.net/xYVRj/

Answer 4

J'ai donné @ Sparky672 la réponse parce qu'il correctement abordé ma question et me conduisit sur la bonne voie, mais je veux partager ce que j'ai fini par faire, ce qui je pense est plus efficace dans l'ensemble:

Au lieu de définir explicitement la hauteur de ligne .link-bar a pour essayer de faire correspondre les hauteurs de conteneur et de bouton, je viens de définir TOUS les éléments de la barre d'outils à la même hauteur de ligne, et les rendre display:inline-bock. Alors que les mises en garde normales d'utilisation appliquer inline-block (Voir here et here), le résultat final est le dimensionnement cohérent et centrage vertical pour tous les éléments que vous jetez dans votre barre d'outils, avec moins css pour gérer:

.link-bar * { 
    line-height: 30px; 
    display:inline-block; 
    /* Keep top-bottom padding of elements zeroed for consistent heights: */ 
    padding-top:0; padding-bottom:0; 
} 

Voir le updated fiddle.