Page 1 of 1

CSS problem with unordered list

Posted: Mon Feb 18, 2013 4:18 am
by barb woolums
I can't get an image and the text vertically aligned in an unordered list (seems to be a recurring problem for me). I tried vertical-allign : middle on the li and a few other tricks I found around the internet to no avail

here's the html

Code: Select all

<ul id="sortme" class="ui-sortable">
<li id="aisle_6">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Herbs & Spices
</li>
<li id="aisle_5">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Nuts
</li>
<li id="aisle_10">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Meat
</li>
</ul>
and the css

Code: Select all

#sortme li {
	margin-bottom:3px;
	height:35px;	
	-webkit-border-radius: 4px;	
	-moz-border-radius: 4px;	
	border-radius: 4px;	
	border: 1px solid #5d0304;	
	padding:2px 5px 0 5px;	
	text-decoration:none;	
	background:#eba8a0;	
	width:200px;	
	color:#FFFFFF;	
	cursor:pointer;	
	font-size:13px;	
}
Currently it looks like the image attached
Screenshot_11.jpg
Screenshot_11.jpg (5.26 KiB) Viewed 16572 times

Re: CSS problem with unordered list

Posted: Mon Feb 18, 2013 5:19 am
by s.dot
Moved to Design

Try setting line-height: 35px, the same height as your li element.

Re: CSS problem with unordered list

Posted: Mon Feb 18, 2013 5:35 pm
by barb woolums
That made no difference with or without vertical-align: middle

[SOLVED] CSS problem with unordered list

Posted: Mon Feb 18, 2013 6:23 pm
by barb woolums
Finally worked it out.

Put the text in a span and put vertical-align: 50% on the span.

Re: CSS problem with unordered list

Posted: Tue Feb 19, 2013 5:06 am
by s.dot
Oh, I see what your problem is now. I think your images should be a background image and then you wouldn't have to worry about the extra span element. vertical align affects the vertical alignment of the element relative to the element it's contained in.

But if it works it works. :)

Re: CSS problem with unordered list

Posted: Tue Feb 19, 2013 7:42 pm
by mecha_godzilla
Just to add to that last comment, it's definitely worth setting the images as backgrounds because you can then use

Code: Select all

background-position: center center;
in your style to make sure that they're always centered correctly relative to the element, and you can also change the images for rollover events, etc. Trying to get two different page elements to vertically align exactly is often difficult, especially with things like radio buttons and text labels, so take the image out of the equation and you halve the problem :) Plus, you only have to declare the image once (in the style sheet) no matter how many list items you have.

M_G

Re: CSS problem with unordered list

Posted: Tue Feb 19, 2013 8:27 pm
by s.dot
+1 to everything mecha_godzilla just said.

Re: CSS problem with unordered list

Posted: Wed Feb 20, 2013 4:59 pm
by mecha_godzilla
s.dot wrote:+1 to everything mecha_godzilla just said.
Thanks s.dot - I think that must be my first +1 on any forum ever! I'd better retire now while I'm on a roll :mrgreen: