I'm struggling to properly align divs with images inside another div. My goal is to insert buttons into my HTML and use jQuery to center them automatically, but I can't seem to get it right.
You can view the fiddle I've created here: http://jsfiddle.net/uucp/m3UmA/
Originally, I planned to calculate the container's size (named "tabs") and divide it by the number of buttons (the count of "tab" classes on the page), then set each tab div's width to that value.
I must be overlooking something basic: default padding or margins perhaps? Any guidance would be greatly appreciated.
Here is the HTML:
<div id="tabs" class="tabs">
<div id="tab_chat" class="tab">
<img class="tab_button" id="tab_chat_img" src="http://hanford.org/users/uucp/jsfiddle/daychat.png">
</div>
<div id="tab_users" class="tab">
<img src="http://hanford.org/users/uucp/jsfiddle/dayusers.png">
</div>
<div id="tab_images" class="tab">
<img src="http://hanford.org/users/uucp/jsfiddle/dayimages.png">
</div>
<div id="tab_night" class="tab">
<img src="http://hanford.org/users/uucp/jsfiddle/daynight.png">
</div>
<div id="tab_refresh" class="tab">
<img src="http://hanford.org/users/uucp/jsfiddle/dayrefresh.png">
</div>
<div id="tab_settings" class="tab">
<img src="http://hanford.org/users/uucp/jsfiddle/daysettings.png">
</div>
</div>
<p>
<div id="console"></div>
</p>
The CSS rules are as follows:
.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;
}
The JavaScript code used:
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 for any help you can provide.