Another centering DIVs within a fixed DIV question

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.

score 4 · Accepted Answer · answered Jun 15 '11 at 18:04

4

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.

enter image description here

answered Jun 15 '11 at 18:04

thirtydot

224,678
48
389
349

No problem. If you need this to work in IE7, see here: http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575 – thirtydot Jun 15 '11 at 18:16
@Stratego: I rejected your suggested edit because in this case, the gaps seem to be desired. – thirtydot Jun 15 '11 at 18:17
Unfortunately this mechanism seems to break the moment I put an inside the div. It somehow changes height and knocks everything out of proportion. I was forced to change everything back to its original state for the time being until I find a solution for this. I'd appreciate it if you can help me with this. I've tried forcing height="100" and width="100" on the but that doesn't seem to help. – Andy Hassan Jun 16 '11 at 02:13
1

@Andy Hassan: That's a common problem with `inline-block`. This is the first and last time that you're going to have that problem though - there's an easy fix. Add `vertical-align: top` to whatever has `display: inline-block`. For details on why this is required, read the "baseline" section here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ – thirtydot Jun 16 '11 at 08:17
Why does this work? Does inline-block somehow make a div equal to text, so text-align: center does something? – sakramento Oct 07 '15 at 17:10

score 2 · Answer 2 · edited Dec 09 '13 at 15:36

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!

score 1 · Answer 3 · answered Jun 15 '11 at 18:13

1

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>

answered Jun 15 '11 at 18:13

yzandrew

785
1
11
25

That works but the logos are subject to change as some will be taken out others will be added in and doing that much math everytime seems a bit troublesome. I've used @thirtydot 's solution for now but will keep yours in mind. I appreciate you taking the time to write this solution yzandrew. – Andy Hassan Jun 15 '11 at 18:16
One thing you might come across with thirtydot's solution is that "display:inline-block" is not working with IE7. define a class like .myInlineBlock { display:inline-block; vertical-align:top; /* For IE 7 */ zoom: 1; *display: inline; } – yzandrew Jun 16 '11 at 01:10
Unfortunately his solution is not working at all when I add an inside the div. – Andy Hassan Jun 16 '11 at 02:34

Another centering DIVs within a fixed DIV question

3 Answers3