Question

基本上我有一个水平div，其中创建了按钮（在此代码中称为字母）。但问题是，按钮与div的左侧对齐并且不会居中。我尝试在text-align:center标签下的CSS文档中使用#letter，但它仍然不会使按钮居中。

如果您需要，以下是创建按钮的代码部分：

// Makes letters for the chosen word.
function letterMaker() {
    for (i=0; i<word.length; i++) {
        var letter = document.createElement("input");
        var letters=(shuffledWord).split("");
        letter.type = "submit";
        letter.value = letters[i];
        letter.id = "letter" + i;
        letter.onclick = letterClick.bind(this, letter.value);
        letter.setAttribute('id', 'letter');
        document.getElementById("letterbar").appendChild(letter);
    }
}

以下是指定属性的代码部分：

#letter {float:left;height:60px;width:60px;background-color:#C0C0C0;border-color:#000000;border-style:solid;border-width:1px;border-radius:5px;font-size:25px;font-family:century gothic}

Answer 1

将按钮放在<div>内margin: auto; div#letterbar内。

Answer 2

在您的css中将保证金设置为auto：

#letter {margin:auto;...}

Answer 3

我猜测你是在为每个元素而不是容器设置对齐。

尝试#letterbar { text-align: center;}

MDN spec说 text-align不控制块元素本身的对齐方式，只控制它们的内联内容。

我知道这对于手头的问题非常切合实用，但考虑使用'class'而不是'id'。 W3规范（HTML5，HTML4相同，但我的代表太低，不能发布超过2个链接 - 这是一个毫无意义的限制）说id必须在文档中是唯一的，并且你的循环吐出多个具有相同id的输入。

JSFiddle示例：http：// jsfiddle.net/UuxuX /

修改

正如我在评论中所说，如果您float左边的输入，则text-align无效。如果您只想将输入置于div的中心，则从输入中删除float并对div进行文本对齐。

Answer 4

我同意 JanParowka 他在之前的帖子中所说的话。

如果div的id是letterbox，那么你应该

#letterbox {text-align：center;}

使用JavaScript对中按钮

4 个答案: