Geek Answers Handbook

Css vertically leveling spans

I am trying to keep everything aligned vertically, but it seems I cannot figure it out.

here is css

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

and 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 fiddle you can see how the image pushes and the text in the text of the tag 'a' needs to be fixed as a

change

Using a background image would be nice, but it makes the image go under the text. new violin

+4
source share
2 answers

How about just using padding for the top and bottom:

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

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

+3
source

Try the following:

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

Vertical-align is a CSS property that often shifts to align text. However, its purpose is to align the images (and yes, it also aligns the text, but only in the table ).

See CSS-tricks.com - What is Vertical Alignment

Test script

+6
source

More articles:


All Articles