Question

我有居中div元素的问题。我尝试使用marings（margin：o auto）和左/右CSS atributes（左：50％，右：50％），但结果是错误的。有人能告诉我问题在哪里吗？

编辑：

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

这就是我所拥有的：

enter image description here

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

Answer 1

您需要添加display: table。这是使用未定义宽度

的元素居中的方法

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

即使您使用float:left; HTML`

，也在#boxcard div使用align"center" with

此外，您需要在px和height

之后使用width

Answer 3

另一种方法是提高效率。因为它不需要单独对齐boxbuttons。

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

DIV不会与中锋保持一致

3 个答案: