html - DIV won't align to center -

html - DIV won't align to center -

i have problem centering div element. tried marings (margin: o auto) , left/right css atributes (left: 50%, right: 50%) result wrong. can tell me where's problem?

edit:

i using javascript fill content of "boxcard" div. problem content of "boxcard" div not aligned center (it's aligned left). using javascript code (added below) fill div's content.

this have:

edit 2:

here 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 js code creates div blocks (i.e. cards)

function shuffleimages() { var imgall = $(source).children(); var imgthis = $(source + " div:first-child"); var imgarr = new array(); (var = 0; < imgall.length; i++) { imgarr[i] = $("#" + imgthis.attr("id") + " img").attr("src"); imgthis = imgthis.next(); } imgthis = $(source + " div:first-child"); (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() { (var y = 1; y < 3 ; y++) { $.each(imgsource, function(i, val) { $(source).append("<div id=card" + y + + "><img src=" + val + " />"); }); } $(source + " div").click(opencard); shuffleimages(); });

you need add together display: table. how center element undefined width

demo http://jsfiddle.net/s7w3q/2/

#boxcard { z-index: 1; display: table; margin: 0px auto; width: auto; }

html css alignment