垂直整列：</p> <p><img src="https://i.stack.imgur.com/Yru7c.png" alt="layout"></p> <p><strong>マイCSS</strong>：ボタン

Question

内のテキストの真ん中の私は、このレイアウトを持っている

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; 
} 

ボタンは、1行のテキスト、私のコードの作品を​​持っている場合よくしかし、上記の画像のようにボタンに2行のテキストがある場合。 line-heightプロパティを使用するため、コードテキストの高さが大きくなります。私はvertical-alignを試しましたが、動作しません。

jsfiddleをご覧ください。

Answer 1

縦方向の配置は、表のセルとして表示される要素（またはインラインブロックに影響しますが、後で効果が異なる）にのみ影響します。これらの要素は浮かせてはいけません。

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

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

Answer 2

もう一つの方法は、flexible boxesを使用することになります。

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

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

あなたがbrowser supportとfiddleを参照して、接頭辞を追加する必要があります。