Vertical alignment with CSS

Hi,

I have searched high and low for an answer to this problem, however, none of the hacks seem to work for me and I'm not sure what to do now. I have a column (css) which has an image followed by text. All I want to do is vertically center the text against the image but I can't shift it from the image baseline.

The code I am using is as follows:-
+++++++++ CSS ++++++++++
div#leftcol{

width: 180px;
float: left;

padding:0px;
margin:0px;
}

div#leftcol span.svcitem;
line-height:70px;
}

+++++++++ HTML +++++++++
<div id="leftcol">
<span class="svcitem"> <img src="images/admin.jpg" width="61" height="70" alt="Administration" />Administration</span>
<br />
<span class="svciten"> <img src="images/bookeeping.jpg" width="61" height="70" alt="Bookeeping" /> Bookeeping</span>
<br />

etc....

I have tried setting the line height to equal the image, also setting the padding top & bottom to 3px but none of this has worked.

I would be very grateful if anyone could provide some idea of I should try next.

Many thanks in anticipation.

Try this :



and this :





That should be good for you.

(BTW... You might want to spell bookkeeping correctly)

Hey, this is great and works perfectly (also you're very good at spelling - thanks). However, I do have one serious concern. As well as adhering to w3c standards, our site must be truly accessible.

Does the use of definition tags for structural layout not flout the 'laws' of accessibility? Is there any way of using this method with structural tags?

Thanks again.

Not at all - you have something in the 'dt' and you're defining it in the 'dd' - no problem.