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 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.

Answer 1

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.