PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 22, 2020 9:56 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 8 posts ] 
Author Message
PostPosted: Mon Feb 18, 2013 5:18 am 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 08, 2009 10:52 pm
Posts: 134
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 14198 times ]


Top
 Profile  
 
PostPosted: Mon Feb 18, 2013 6:19 am 
Offline
Tranquility In Moderation
User avatar

Joined: Sun Feb 06, 2005 8:18 pm
Posts: 5001
Location: Indiana
Moved to Design

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

_________________
- A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.


Top
 Profile  
 
PostPosted: Mon Feb 18, 2013 6:35 pm 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 08, 2009 10:52 pm
Posts: 134
That made no difference with or without vertical-align: middle


Top
 Profile  
 
PostPosted: Mon Feb 18, 2013 7:23 pm 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 08, 2009 10:52 pm
Posts: 134
Finally worked it out.

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


Top
 Profile  
 
PostPosted: Tue Feb 19, 2013 6:06 am 
Offline
Tranquility In Moderation
User avatar

Joined: Sun Feb 06, 2005 8:18 pm
Posts: 5001
Location: Indiana
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. :)

_________________
- A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.


Top
 Profile  
 
PostPosted: Tue Feb 19, 2013 8:42 pm 
Offline
Forum Contributor
User avatar

Joined: Wed Apr 14, 2010 4:45 pm
Posts: 375
Location: UK
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


Top
 Profile  
 
PostPosted: Tue Feb 19, 2013 9:27 pm 
Offline
Tranquility In Moderation
User avatar

Joined: Sun Feb 06, 2005 8:18 pm
Posts: 5001
Location: Indiana
+1 to everything mecha_godzilla just said.

_________________
- A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.


Top
 Profile  
 
PostPosted: Wed Feb 20, 2013 5:59 pm 
Offline
Forum Contributor
User avatar

Joined: Wed Apr 14, 2010 4:45 pm
Posts: 375
Location: UK


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group