Centering Text in CSS ul menu w/background image

Posted on 2011-05-08
Last Modified: 2012-05-11

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.
Question by:SlickCatSeven
    LVL 13

    Accepted Solution

    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.


    Author Closing Comment

    Well done!


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now