I am struggling to center a div element. I have tried using margins (margin: 0 auto) and left/right CSS attributes (left: 50%, right: 50%), but the result is not as expected. Can anyone point out where the problem might be?
EDIT:
The issue I'm facing is that when I use JavaScript to populate the content of the "boxcard" div, the content is not centered but aligned to the left instead. Below is the JavaScript code I am using to fill the DIV's content.
This is my current setup:
EDIT 2:
Here is a link to the jsfiddle example: jsfiddle
CSS:
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0 auto;
width: auto;
}
#boxcard {
z-index: 1;
margin: 0 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 the JS Code responsible for creating the DIV blocks (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();
});