DIV 不会与中心对齐答案

【问题标题】：DIV won't align to centerDIV 不会与中心对齐
【发布时间】：2014-06-23 02:14:50
【问题描述】：

我在将 div 元素居中时遇到问题。我尝试使用marings（margin：o auto）和左/右CSS属性（左：50％，右：50％），但结果是错误的。谁能告诉我问题出在哪里？

编辑：

我正在使用 JavaScript 来填充“boxcard”div 的内容。问题是“boxcard” div 的内容未与中心对齐（它与左对齐）。我正在使用 JavaScript 代码（添加在下面）来填充 DIV 的内容。

这就是我所拥有的：

编辑 2：

这里是 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>

这是创建 DIV 块（即卡片）的 JS 代码

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();
});

【问题讨论】：

您能详细说明一下吗？ jsfiddle.net/K5Txb 似乎显示居中对齐的项目。
我这边完全没有问题
我添加了我的结果的屏幕截图@MuhammadUmer
请提供demo，jsfiddle中不会出现框
@user3739658 我用 jsfiddle 链接更新了我的问题

标签： html css alignment

【解决方案1】：

您需要添加display: table。这就是你如何将一个未定义宽度的元素居中

演示http://jsfiddle.net/s7w3q/2/

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

【讨论】：

谢谢@Vector。它工作得很好。谢谢你的帮助。

【解决方案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;
}

即使您使用的是align"center" withHTML`，您也在#boxcard div 上使用float:left;`

您还需要在height 和width 之后使用px

【讨论】：

您的代码的问题是我在一行中插入了一张卡片，其中包含六个 @user3739658
您没有列出 px 的事实可能会在某些浏览器中引起问题，所以最好有它

【解决方案3】：

另一种方法会更有效。因为它不需要单独对齐boxbuttons。

#boxcard {
    display: inline-block;
...
}
....
#picbox {
    text-align: center;
...
}

【讨论】：