I'm having some difficulty centering some divs containing images inside a div. I am hoping to add buttons to HTML and have jQuery automatically center them but I can't get it quite right.

I have a fiddle set up here: /

My original plan was to take the size of the container (named "tabs") and divide by the # of buttons (the number of "tab" classes on the page) then set the width of each tab div to that value.

I must be missing some elementary: default padding or margins? Confused, baffled, etc, any help would be appreciated.

HTML:

<div id="tabs" class="tabs">
    <div id="tab_chat" class="tab">
        <img class="tab_button" id="tab_chat_img" src=".png">
    </div>
    <div id="tab_users" class="tab">
        <img src=".png">
    </div>
    <div id="tab_images" class="tab">
        <img src=".png">
    </div>
    <div id="tab_night" class="tab">
        <img src=".png">
    </div>
    <div id="tab_refresh" class="tab">
        <img src=".png">
    </div>
    <div id="tab_settings" class="tab">
        <img src=".png">
    </div>
</div>
<p>
    <div id="console"></div>
</p>

CSS:

.tabs {
    height: 34px;
    padding-top: 1px;
    padding-bottom: 0px;
    background-color: #000;
}
.tab {
    text-align: center;
    border: 0;
    display: inline-block;
    color: #fff;
}
div.tab_button {
    border: 0;
    width: 32px;
    height: 32px;
}

JavaScript:

var tabCount = $(".tab").size();
var offset = 24;
var tabWidth = Math.floor(($("#tabs").width() / tabCount));
$('.tab').each(

function (i, tab) {
    $(tab).css("width", tabWidth + "px");
    $("#console").append("tabCount=" + tabCount + " tabWidth=" + tabWidth + " tabs.width=" + $("#tabs").width() + "<br/>");
});

Thank you.

I'm having some difficulty centering some divs containing images inside a div. I am hoping to add buttons to HTML and have jQuery automatically center them but I can't get it quite right.

I have a fiddle set up here: http://jsfiddle/uucp/m3UmA/

My original plan was to take the size of the container (named "tabs") and divide by the # of buttons (the number of "tab" classes on the page) then set the width of each tab div to that value.

I must be missing some elementary: default padding or margins? Confused, baffled, etc, any help would be appreciated.

HTML:

<div id="tabs" class="tabs">
    <div id="tab_chat" class="tab">
        <img class="tab_button" id="tab_chat_img" src="http://hanford/users/uucp/jsfiddle/daychat.png">
    </div>
    <div id="tab_users" class="tab">
        <img src="http://hanford/users/uucp/jsfiddle/dayusers.png">
    </div>
    <div id="tab_images" class="tab">
        <img src="http://hanford/users/uucp/jsfiddle/dayimages.png">
    </div>
    <div id="tab_night" class="tab">
        <img src="http://hanford/users/uucp/jsfiddle/daynight.png">
    </div>
    <div id="tab_refresh" class="tab">
        <img src="http://hanford/users/uucp/jsfiddle/dayrefresh.png">
    </div>
    <div id="tab_settings" class="tab">
        <img src="http://hanford/users/uucp/jsfiddle/daysettings.png">
    </div>
</div>
<p>
    <div id="console"></div>
</p>

CSS:

.tabs {
    height: 34px;
    padding-top: 1px;
    padding-bottom: 0px;
    background-color: #000;
}
.tab {
    text-align: center;
    border: 0;
    display: inline-block;
    color: #fff;
}
div.tab_button {
    border: 0;
    width: 32px;
    height: 32px;
}

JavaScript:

var tabCount = $(".tab").size();
var offset = 24;
var tabWidth = Math.floor(($("#tabs").width() / tabCount));
$('.tab').each(

function (i, tab) {
    $(tab).css("width", tabWidth + "px");
    $("#console").append("tabCount=" + tabCount + " tabWidth=" + tabWidth + " tabs.width=" + $("#tabs").width() + "<br/>");
});

Thank you.

• javascript
• jquery
• css
• html

3 Answers 3

You can handle it using CSS, using text-align: center property.

Add it like here.

.tabs {
height: 34px;
padding-top: 1px;
padding-bottom: 0px;
background-color: #000;
text-align: center;
}

Check this JSFiddle

If you want a responsive solution you can do this: DEMO

Add this class to the container div: justified-adjustment.

Just add these CSS rules:

.justified-adjustment { text-align: justify; }

.justified-adjustment > * {
   display: inline-block;
   vertical-align: middle;
}

.justified-adjustment::after {
   content: "";
   width: 100%;
   display: inline-block;
}

Where the markup is:

<div class="tabs-container justified-adjustment">
    <img src="#" alt="Image 1" />
    <img src="#" alt="Image 2" />
    <img src="#" alt="Image 3" />
</div>

Try to resize the windows and you'll see that is a responsive solution.

What you want can be achieved using a fixed table layout. Simply take a table with one row and as many columns as you like, and give the table this CSS: table-layout: fixed;. This will make all the calculations for you and make the table columns equal width. Obviously the table also needs a width of 100%, and you also need to make the image in the center of the table cell, so we need text-align: center on the cells.

That's it. Heres the fiddle: Link