Vertically aligning text in <li>

HTML & CSS
1

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:


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:


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


div#links ul li a{
	vertical-align: top;
}
2

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

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! :slight_smile: