CSS Вертикальное выравнивание SPAN

Question

Я не могу по вертикали выровнять промежутки в моем реальном базовом коде.

Вот CSS:

.BigGreyTitle {font-size: 22px; 
    color: #676767; 
    font-weight: bolder; 
} 

.f1 { 
    font-size: 12px; 
    font-family: arial,'Lucida Grande','Bitstream Vera Sans',verdana,sans-serif; 
} 

.mainlink-u a { 
    color: #EF3834; 
    text-decoration: underline; 
} 

Вот HTML Markup:

<table cellpadding="0" cellspacing="0" border="0" style="width:100%"> 
    <tr> 
    <td class="BigGreyTitle" align="left">All Members In Montana</td> 
    <td align="right"> 
    <span><img src="http://www.coalprepdir.com/images/schemes/red/ret_arrow.png" style="border:none" alt=""/></span> 
    <span style="padding-left:5px" class="f1 mainlink-u"><a href="distribution_us_stats.asp">Go Back To US Distribution</a></span></td> 
    </tr> 
</table> 

Посмотрите: http://jsfiddle.net/sJA92/

Любая помощь, чтобы получить их вертикально будет высоко оценен. .

Спасибо!

Answer 1

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

img { 
    vertical-align:middle; 
} 

jsFiddle example

Answer 2

span { 
    vertical-align: top; 
} 

http://jsfiddle.net/sJA92/1/

Для другого уровня вертикального выравнивания (базовый, средний, низ ...) вам необходимо настроить их заполнения и полей.

Answer 3

Я думаю, что нужно плыть пролетов. Я также установил td для выравнивания. Смотрите эту ссылку:

http://jsfiddle.net/sJA92/6/

td{ 
    vertical-align:middle 
} 
td span{ 
    float: left 
}