CSS Vertical Alignment of SPAN

I can't seem to vertically align the spans in my real basic code.

Here is the 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;
}

Here is the 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>

Take a look: http://jsfiddle.net/sJA92/

Any help to get these vertically aligned would be greatly appreciated..

Thanks!

Answers


Add a rule to vertically align the image to the middle.

img {
    vertical-align:middle;
}

jsFiddle example


Need Your Help

Defining specific lengths with HTML5 input pattern attributes

html5 input

Right now I can set a specific length, or a range, but not two different lengths, both valid.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.