Centering left floated <li> tags inside of a container

I have a container that contains:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

As in here: http://sneakyrascal.com/gmat/conv/select-plan.html And the CSS for the <li> is set to the left so they 开发者_如何学JAVAcan be in one line. If I remove one <li> then it will add an empty space to the right. like this one: http://sneakyrascal.com/gmat/conv/select-plan-2.html When I remove a <li> I want the other ones to be centered rather than being floated to the left. But I can't remove the float:left now that they need to be in one order. How can I get around it? I tried margin: auto; for <ul> but it didn't work.

If you're absolutely constrained to using floats to achieve this, then you'll need some way to compute what the width of the container should be given the number of elements, and somehow apply it to the container directly. Then margin:auto should work fine.

Why? Because when you float the items, the container no longer uses them to calculate its width.

As is, it appears you are applying width: 1050px directly to the container. You might want to remove this style declaration from the stylesheet, and then (if you can) dynamically insert a class-name like columns-4 or columns-5 (depending on the count) to the container, then style each class with the appropriate width.

If, however, you can use other layout methods, then you have a couple of better options:

Apply display:inline-block on the lis, like here: http://jsfiddle.net/HPeAK/

Notes: 1) ie6 won't apply display:inline-block to elements that are native blocks, like <li>, so if IE6 support is essential (yuck!), you would need to have a span inside that item and apply display:inline-block there.

2) inline-block will introduce white-spaces where they exist in the source because they are treated as inline elements.

OR:

Apply display:table on the container or ul, and display:table-cell on the <li>s, like here: http://jsfiddle.net/3efZJ/

I found that if you set your UL to have display: table, margin: 0 auto will work on that and centre it. The alternative is set the UL to display: inline-block and use text-align: center on the container div to position it. With both of these though you are going to see problems with IE7 and below. It doesn't support display: table outright and display: inline-block only works on elements which are naturally inline, of which UL isn't.

Make your container overflow: hidden:

.select-plan #container {
    float: left;
    margin: 0 auto 40px;
    overflow: hidden;
    width: 1050px;
}

Set the list as having float: left; left: 50%; position: relative; margin: 0 auto like so:

.select-plan #container ul {
    float: left;
    left: 50%;
    margin: 0 auto;
    position: relative;
    list-style-type: none;
}

Give your list items right: 50% like so

.select-plan #container ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px #666666;
    float: left;
    height: 418px;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
    width: 187px;
    right: 50%;
}

This hack should work. It isn't ideal but hey, it's better than nothing.

you cannot use auomatic left/right margin if you don't give a value to the width of ul.

If you generate this page with a programming language, you can calculate the width of the UL element having fixed with of LI elements.

So for the second example you can set a width of 796px for UL element obtaining the effect you need.

As i can see in your css you are forcing elements to stay in different positions.

eg. #margin-top: -106px; in footer

This may lead to different appearances in different browsers. Moreover elements are overflowing.

eg. elements inside#wrapdiv.

you can add overflow: hidden; to fix that. Use firebug and hover over your page and try to fix the css issues first.

.select-plan #container ul {
    margin-left: 9em;
}

It's not dynamic but it will center 4 containers.