Change leading (baseline) of image in list

HTML & CSS
1

Hi all,
I would like the crossbar image between the list items to be centered vertically i.e. to increase the leading of the text so the image sat in the middle of the words. I’ve tried a bazillion things only a couple of which you can see here: http://mmnkltd.com/trials/leading.html
I read: http://meyerweb.com/eric/css/inline-format.html (hopefully my understanding not getting too far off base:confused:) and tried to apply those concepts to lists with no success.
Ideas please, or can it not be done?
thanks
Cheers

2

Maybe I’m not understanding exactly what you want, but how about leaving the text items alone and moving the images down however much you need to produce the desired result? For example, you could style each image with “position:relative; top:20px;” or whatever value works.

Ned

3

Test using the vertical-align property with your code. E.g:


ul * {
  vertical-align: middle;
}
4

Thank you all for getting back to me. I’ve tried both ways.
recce101’s solution is here: http://mmnkltd.com/trials/leading.html To make it all balance out I put a border at the bottom of the ul;

		
ul {
	background-color: #FF9;
	[B]border-bottom: 14px solid #FF9;	/* light yellow line */[/B]
		}
li {
	display: inline;
	padding: 10px;
}
.image-bump {
	position: relative;
	top: 20px;
}

that worked except for the large space above the list.
and Erik J’s here: http://mmnkltd.com/trials/leading02.html
This also worked, but unless I misunderstand the “" the style will apply to all the unordered lists – something I don’t think I want.
I tried some variations on the <ul>s but couldn’t keep the style from applying to other ids of the uls. (Like I said, my understanding of the "” may be wrong.)
more ideas???
thank you!

5

HI,

I didn’t understand what you meant exactly but if you want the alignment to apply to one list only then use the id.


ul#vertical * {
    vertical-align: middle;
}

The universal selector (*) will apply rules to every element that is a child or grandchild of the ul element. As vertical-align only applies to inline elements it will only have effect if the elements are inline elements of course.

6

Thanks all,
Paul, I understand that issue better.
I also changed the graphic a little so it sat better in the list, but what really made it work was the: vertical-align: middle;.
the change is at: http://mmnkltd.com/trials/leading02.html
thanks everyone for your help.