Another centering DIVs within a fixed DIV question

I am attempting a very simple procedure here, basically trying to center the client logos within this main clients div. I've just recently started with this web design business and while I can read some of the solutions out there, I'm having trouble applying them to my structure.

Basically I have a few client boxes, each is going to have a PNG image inside of them:

            <div id="clients">
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
            </div>

I'd like to be able to center the client-box's on the client's div that has a fixed weight. I've tried using display: inline-block but that didn't seem to do much. I'm assuming that's because I've开发者_StackOverflow already forced them to float: left but I don't know how I can maintain their position in the div without doing so. Like I said I'm quite a novice with CSS and this is what I've been doing for all my CSS.

Here's what I have for clients and client-box CSS:

           #clients {
           background-image: url("img/images/clients_bg.png");
           border-bottom: 1px solid #333333;
           border-top: 1px solid #666666;
           float: left;
           margin-top: 120px;
           padding: 10px;
           width: 778px;
           }
           .client-box {
           background: none repeat scroll 0 0 #bcb546;
           float: left;
           font-family: verdana;
           font-size: 11px;
           height: 60px;
           margin-right: 10px;
           opacity: 0.8;
           padding-top: 40px;
           text-align: center;
           width: 100px;
           }
           .client-box:hover {
           opacity: 1;
           }

From my understanding, this shouldn't be hard to achieve, but so far I have not had any luck probably because my brain is fixated on a certain way of doing things and it just won't budge. Any help would be greatly appreciated.

You can see the live site here.

Thank you SO.

I've tried using display: inline-block but that didn't seem to do much.

float: left forces display: block, so display: inline-block would have no effect.

On .client-box, you need to:

• remove float: left
• add display: inline-block.

Finally, on the parent element (#clients), you need to add text-align: center.

If your outer div is of a fixed width you can set the margins for the inner div to take up the appropriate space. eg:

<div class="outer">
    <div class="inner">
        stuff
    </div>
</div>

CSS

.outer { width: 600px; }
.inner { width: 400px; margin-left: 100px; margin-right: 100px; }

Alternatively you can use margin-left: auto; margin-right: auto; however that (like everything else in the world) doesn't work in IE.

Hope this helps!

I will add a wrapper to the client-boxes, whose width is equal to the total width of client-boxes.

For example, in the live site you post above, there are 5 client boxes, and each of them are 100px width with 10px margin-right. So add a div wrapper with width 5 x (100 +10) = 550px, and center the wrapper with "margin-left:auot" and "margin-right:auto".

<div style="width: 550px;margin-left: auto; margin-right: auto;">

                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
</div>