Grow your CSS skills. Land your dream job.

Centering a basic ul

  • # May 29, 2013 at 3:58 pm

    [Your text to link here…](http://chefpepe.com/newsletters/eblast-list.html “Newsletter List”)

    What’s the most ‘pro joe’ way to center this ul horizontally and vertically on the page?

    I was hoping to avoid any widths so it’s dynamic according to whatever is the longest sentence.

    # May 29, 2013 at 4:08 pm

    Well, given the size of your list, I don’t think vertical centering should matter. Now, regarding horizontal centering, you won’t do much without a given width; could it be 50%, 500px or whatever pleases you.

    Try this on the #nav element:

    #nav {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    }

    And remove both z-index and height.

    # May 29, 2013 at 4:37 pm

    Nice, also, if you inspect css lines 45 to 55. What would I use those spans for? I got the code from somewhere and I just want to understand better.

    # May 29, 2013 at 4:39 pm

    [http://stackoverflow.com/questions/7037553/center-ul-in-div-vertically-and-horizontally](http://stackoverflow.com/questions/7037553/center-ul-in-div-vertically-and-horizontally “”)

    # May 29, 2013 at 4:44 pm

    > Nice, also, if you inspect css lines 45 to 55. What would I use those spans for? I got the code from somewhere and I just want to understand better.

    Looks like you don’t use span at all, you can safely remove those lines.

    > http://stackoverflow.com/questions/7037553/center-ul-in-div-vertically-and-horizontally

    Yeah, but he’s talking about an horizontal list, not a vertical one. :)

    # May 29, 2013 at 5:00 pm

    You can use display as well with CSS2.1 or 3 (+ vendor-prefix).

    http://dabblet.com/gist/5673775

    As you can see , no need to size the centered container.

    If you want to include IE7 and below, then you need one extra tag and use display:inline;+zoom:1 .

    # May 29, 2013 at 5:02 pm

    … the list can be horizontal or vertical, and both horizontal/vertiacal centered.

    # May 29, 2013 at 6:46 pm

    Yeah horizontal is all I need, but for my education, can you show me an example using my divs? I’m not sure what to get rid of and/or replace.

    # May 29, 2013 at 8:30 pm

    This answer was perfect : http://css-tricks.com/forums/discussion/comment/105203/#Comment_105203 , you have nothing to remove or replace from your HTML.

    Idem for your CSS.

    There is no ‘magic’ to add :)

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

You must be logged in to reply to this topic.

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