Блог

Используя приведенный ниже код, мой текст выравнивается по вертикали снизу. Нужна помощь в выравнивании текста по вертикали в середине с помощью значка в ссылке.

jsfiddle

HTML

 <a href="/The-Experience.aspx" class="icon">
    <span class="white bold">Learn More</span>
    <div class="arrow-white-right"></div>
</a>
  

CSS

 a.icon { line-height:46px; vertical-align:middle; }
.arrow-white-right { display:inline-block; height:46px; width:46px; background:url('/img/icons/arrow-white-glyph.png'); background-repeat:no-repeat; background-position:-50px 0; }
.white { color:#fff; }
.bold {font-weight:bold; }
  

Попробуйте добавить position:absolute в свой класс .arrow-white-right.

Вот рабочий jsfiddle http://jsfiddle.net/B4KC7/1 /

 .arrow-white-right { 
   position:absolute; 
   display:inline-block; 
   height:46px; width:46px; 
   background:url('/img/icons/arrow-white-glyph.png'); 
   background-repeat:no-repeat; background-position:-50px 0; 
}
  

Вам нужно создать img тег и присвоить ему vertical-align свойство.

 <img src="/img/icons/arrow-white-glyph.png" widtt="46" height="46"/>

<a href="/The-Experience.aspx" class="icon">
    Learn More
</a>

a.icon { 
    line-height:46px; 
    color:#fff;
    font-weight:bold;
}
img {
    vertical-align:middle;
}
  

Я также не совсем уверен, почему вы используете <span> для оформления своего тега привязки. Это кажется немного избыточным.

Вот скрипка JS