Centering Text in CSS ul menu w/background image

http://www.slickcat.com/button/button.php

http://www.slickcat.com/button/css.css

I would like to center the text links up/down in this css menu ul that has a background image. I am using text-indent in the li class to move the text to the right to hit the background, but I can't figure out how to center the text top to bottom properly. I've tried padding and margin variations but the result moves the background, not the text.

Thank you.
SlickCatSevenAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
I accomplished this by doing the following:

On your .menu a selector I gave it a padding of 8px 0 0 0, so it came out as

.menu a {
    background: url("button.png") no-repeat scroll 0 0 transparent;
    color: #555555;
    display: block;
    height: 32px;
    padding: 8px 0 0 0;
    text-decoration: none;
    width: 300px;
}

Open in new window


This got the text centered. But because your a element is block, it spaces it all out. You can solve this by giving your .menu li a negative margin. This came out as

.menu li {
    list-style: none outside none;
    margin: -8px 0 0;
    text-indent: 80px;
}

Open in new window


Here is a screenshot.


 Screenshot
0
 
SlickCatSevenAuthor Commented:
Well done!

Mahalo
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.