PHP Developers Network
http://forums.devnetwork.net/

CSS problem with unordered list
http://forums.devnetwork.net/viewtopic.php?f=68&t=137414
Page 1 of 1

Author:  barb woolums [ Mon Feb 18, 2013 5:18 am ]
Post subject:  CSS problem with unordered list

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
Syntax: [ Download ] [ Hide ]
<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

Syntax: [ Download ] [ Hide ]
#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 14197 times ]

Author:  s.dot [ Mon Feb 18, 2013 6:19 am ]
Post subject:  Re: CSS problem with unordered list

Moved to Design

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

Author:  barb woolums [ Mon Feb 18, 2013 6:35 pm ]
Post subject:  Re: CSS problem with unordered list

That made no difference with or without vertical-align: middle

Author:  barb woolums [ Mon Feb 18, 2013 7:23 pm ]
Post subject:  [SOLVED] CSS problem with unordered list

Finally worked it out.

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

Author:  s.dot [ Tue Feb 19, 2013 6:06 am ]
Post subject:  Re: CSS problem with unordered list

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. :)

Author:  mecha_godzilla [ Tue Feb 19, 2013 8:42 pm ]
Post subject:  Re: CSS problem with unordered list

Just to add to that last comment, it's definitely worth setting the images as backgrounds because you can then use

Syntax: [ Download ] [ Hide ]
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

Author:  s.dot [ Tue Feb 19, 2013 9:27 pm ]
Post subject:  Re: CSS problem with unordered list

+1 to everything mecha_godzilla just said.

Author:  mecha_godzilla [ Wed Feb 20, 2013 5:59 pm ]
Post subject:  Re: CSS problem with unordered list


Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/