CODEWITHSUNDEEP
css
mcgrailm
mcgrailm

Reputation: 17640

css vertically aligning spans

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

Upvotes: 5

Views: 17501

Answers (2)

Clement Herreman
Clement Herreman

Reputation: 10536

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

Upvotes: 6

gutierrezalex
gutierrezalex

Reputation: 828

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

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

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

Upvotes: 3

Related Questions