css vertically aligning spans

Question

I'm trying to keep everything aligned vertically but can't seem to figure it out

here is the css

fieldset span{
    padding:50px 10px 0px 10px;
    float:left;
    clear:none;
}
fieldset span.buttons{
    float:right;
}

and the html markup

<fieldset class="remove">
    <span class="itemtype">story</span>
    <span class="itemtype">53547</span>
    <span class="title">New online education program aimed at curbing dangerous drinking</span>
    <span class="buttons">
        <a href="#" target="blank"><img src="img/edit.png" alt="edit story" />Edit</a>
        <a href="#7" target="blank"><img src="http://www.bibliomania.com/graphics/read.gif" alt="read story" />Read</a>
    </span>
    <input type="hidden" name="featured[items][53547]" value="story" />
</fieldset>

and a fiddle you can see how the image pushes down also the text in the 'a' tag text needs to be corrected as well

edit

using background image would be nice but that makes the image go under the text see new fiddle

Answer 1

Try this :

fieldset span a img {
    vertical-align: middle;
}

Vertical-align is a CSS property that is often misued to align text. However its aim is to align images (and yes, it also does align text but only in table).

See CSS-tricks.com - What is vertical-align

Fiddle to test

Answer 2

What about just using the padding for both top & bottom:

fieldset span{
    padding:25px 10px 25px 10px;
...

http://jsfiddle.net/SxCH2/5/