CSS Отказывается для выравнивания средней

Question

я получил ссылку, чтобы посмотреть и функцию, как я хочу, но по какой-то причине стрелок отказывается выровнять середину с текстом по наведению

https://jsfiddle.net/Lo24dopt/

<div id="hero-content">    
<a href="#roller" class="button ease-in-out" style="vertical-align:middle"><span>Learn more </span></a></div> 

Answer 1

Обратите внимание, что вертикально-выровненные работы отображаются только на дисплее.

https://jsfiddle.net/Lo24dopt/1/

#hero-content{ 
    width: 100%; 
    display: table; 
} 
#hero-content a { 
    display: table-cell; 
} 

Answer 2

Дайте вертикальные Выровнять родительский div вместо тега привязки.