vertical-align: middle für Text in Schaltfläche

Question

Ich habe dieses Layout:

Meine CSS:

body { 
    background: #e2eaed; 
} 
a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 30px; 
    height: 62px; 
    line-height: 62px; 
    /* vertical-align: middle is not works */ 
    background: #8dc73f; 
    width: 132px; 
    padding: 0 25px; 
    font-size: 16px; 
    text-align: center; 
    font-weight: bold; 
    margin-left: 4px; 
    display: block; 
    float: left; 
} 

Wenn der Knopf hat 1-line Text, mein Code funktioniert Gut. Aber wenn der Button 2-zeiligen Text hat, wie im Bild oben. Der Codetext hat eine große Höhe, weil ich die Eigenschaft line-height verwende. Ich habe versucht vertical-align, aber es funktioniert nicht.

Bitte siehe jsfiddle.

Answer 1

Vertikale Ausrichtung wirkt sich nur auf Elemente aus, die als Tabellenzellen (oder Inline-Blöcke) angezeigt werden, die Auswirkungen auf spätere Versionen sind jedoch unterschiedlich. Diese Elemente dürfen nicht schweben.

a { 
    display: table-cell; 
    vertical-align: middle; 

    /* Reset */ 
    float: none; 
    line-height: normal; 
} 

Answer 2

würde andere Methode flexible boxes werden:

a { 
    display: inline-flex; 
    align-items: center; /* cross axis */ 
    justify-content: center; /* main axis */ 

    line-height: 1; /* reset */ 
} 

Sie müssen Präfixe hinzufügen, browser support und fiddle sehen.