CSS отказывается выравнивать середину

#css

#css

Вопрос:

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

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>
 

Ответ №1:

Пожалуйста, обратите внимание, что выравнивание по вертикали работает только для отображения: таблица-ячейка.

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

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

Ответ №2:

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