Grow your CSS skills. Land your dream job.

Solution to vertically position a ul list within a div and have it stay put.

  • # August 11, 2011 at 3:59 pm


    I need to figure out how to vertically center the

    #wrap ul li { list-style:none;
    padding: 2px;
    line-height: 5px;

    to the ribbon on this page. Right now it sits pretty much in the vertical center in Firefox and Safari, because I have given a line height to bump it there, but I need the real answer so it’s positioned correctly in all browsers.

    Please view the page hear:

    Kind regards,

    # August 11, 2011 at 4:07 pm

    I think i solved this at work, but unfotunately the code is at work I’ll look into it and return tomorrow if it is indeed the solution.

    # August 11, 2011 at 4:12 pm

    If you wish to centre the links you should generally set the text size to the same as the line height (providing that you have the same padding top and bottom).

    # August 11, 2011 at 7:24 pm

    @Paulie_D Did you mean that you should set the line-height to the same value as the height? The font-size has nothing to do with it.

    @pittles78 Try giving the list item a fixed height (rather than using padding) and then match the line-height to that value. That will be as consistent as you can get it cross-browser wise.

    # August 11, 2011 at 7:51 pm

    Thanks again sl1dr! That was the answer I was looking for.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".