SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically aligning text in <li>

    Hi all,

    After much searching around these parts and the CSS reference, I am still struggling with these list elements. I have a custom image for list-style-image, and I would like the text in each <li> to be aligned vertically in the middle. However, the text is insistent on aligning with the bottom of the list-style-image! I don't know where to turn. Vertical-align is not helping any.

    I'm thinking something must be incorrect in my CSS.

    Here is the relevant CSS:
    Code CSS:
    div#links { /* Links */
    	margin: 0 0 25px 29px;
    	padding: 0;
    	background: url('imgs/bg_links.jpg') top left repeat;
    	width: 219px;
    	border-bottom: 1px solid #99ad63;
    }
     
    div#links ul {
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	list-style: none inside url("imgs/leaf_sm.png");
    }
     
    div#links ul li {
    	margin: 0;
    	padding: 0;
    	height: 35px;
    	vertical-align: middle;
    	border-top: 1px solid #99ad63;
    	border-left: 1px solid #99ad63;
    }

    Here is the relevant HTML:
    HTML Code:
    <div id="links">
         <ul>
              <li><a href="#" alt="Our Services">Our Services</a></li>
              <li><a href="#" alt="Contact Us">Contact Us</a></li>
              <li><a href="#" alt="Home Page">Home Page</a></li>
         </ul>
    </div>
    Edit:
    Yep. Soon as I post, I figured something out. I removed the vertical-align from the <li>.

    This adjusts the text vertically, but it's not very precise:

    Code CSS:
    div#links ul li a{
    	vertical-align: top;
    }
    Last edited by lala__valse; Feb 24, 2011 at 01:33. Reason: Lightbulb slowly turned on

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The list style image is virtually impossible to align properly and varies from browser to browser which is the reason that most avoid it and just use a normal background image which you can place with pixel perfection cross browser

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh... of course! I could put a background image to the <li> and still be able to change it on hover.

    Much thanks, Paul, Powerful Knower of All Things CSS!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •