Выравнивание значка пользовательского интерфейса JQuery в кнопке

Question

У меня возникли трудности с правильной настройкой изображения значка на моей кнопке. Если вы перейдете на http://jsfiddle.net/Vw9Z6/7/, вы заметите, что значок плавает выше слова «Продолжить». Я хочу, чтобы значок и слово «Продолжить» были в одной строке. Я могу futz с margin-top, чтобы заставить его работать, но, на мой взгляд, он может быть ненадежным в зависимости от разрешения экрана пользователя.

Любая идея о том, как я могу решить эту проблему?

Большое спасибо.

Answer 1

Замените ваш .my-button-icon следующим:

.my-button-icon { 
    margin-left:10px; 
    display: inline-block; 
} 

float: right; бездельничал выравнивание вверх: http://jsfiddle.net/Vw9Z6/11/

Update:

Вы можете играть с vertical-align: middle;, а также. Я думаю, что при текущем размере текста выравнивание выглядит лучше без стиля vertical-align, но это может измениться с увеличением/уменьшением шрифта.

Answer 2

Можете ли вы установить положение кнопки в относительном, а затем в абсолютном положении, значок внутри кнопки? Если вы это сделаете, не имеет значения, какое разрешение просматривается.