DIV won't align to center - html

Question

I have problem with centering div element. I tried with marings (margin: o auto) and with left/right CSS atributes (left: 50%, right: 50%) but result was wrong. Can someone tell me where's the problem?
EDIT:
I am using JavaScript to fill content of "boxcard" div. Problem is that content of "boxcard" div is not aligned to center (it's aligned to left). I am using JavaScript code (added below) to fill DIV's content.
This is what I have:
EDIT 2:
Here is jsfiddle : jsfiddle
CSS:
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
z-index: 1;
margin: 0px auto;
width: auto;
}
#boxcard div{
float: left;
width: 100;
height: 120;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #B1B1B1;
z-index: 2;
}
#boxcard > div:nth-child(6n+1) {
clear: both;
}
#boxcard div img {
display: none;
border-radius: 10px;
z-index: 3;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
HTML
<div id="picbox">
<span id="boxbuttons">
<span class="button" id="rezz">
Result
<span id="counter">0</span>
</span>
<span class="button" id="ttime"></span>
<span class="button">
<a onclick="ResetGame();">Reset</a>
</span>
</span>
<div id="boxcard" align="center"></div>
</div>
This is JS Code that creates DIV blocks (i.e. Cards)
function ShuffleImages() {
var ImgAll = $(Source).children();
var ImgThis = $(Source + " div:first-child");
var ImgArr = new Array();
for (var i = 0; i < ImgAll.length; i++) {
ImgArr[i] = $("#" + ImgThis.attr("id") + " img").attr("src");
ImgThis = ImgThis.next();
}
ImgThis = $(Source + " div:first-child");
for (var z = 0; z < ImgAll.length; z++) {
var RandomNumber = RandomFunction(0, ImgArr.length - 1);
$("#" + ImgThis.attr("id") + " img").attr("src", ImgArr[RandomNumber]);
ImgArr.splice(RandomNumber, 1);
ImgThis = ImgThis.next();
}
}
$(function() {
for (var y = 1; y < 3 ; y++) {
$.each(ImgSource, function(i, val) {
$(Source).append("<div id=card" + y + i + "><img src=" + val + " />");
});
}
$(Source + " div").click(OpenCard);
ShuffleImages();
});

Answer 1

You need to add display: table. This is how you center an element with a undefined width
DEMO http://jsfiddle.net/s7w3q/2/
#boxcard {
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}

Answer 2

#boxcard div{
width: 100px;
display:inline-block;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #B1B1B1;
z-index: 2;
}
You were using float:left; on #boxcard div even when you were using align"center" withHTML`
Also you needed to use px after height and width

Answer 3

another way to do this would be more efficient. As it'd Remove the need to separately align boxbuttons.
#boxcard {
display: inline-block;
...
}
....
#picbox {
text-align: center;
...
}