使用JavaScript对中按钮

基本上，我有一个水平的

div

，其中创建了按钮（在这个代码中称为字母）。但问题是，这些按钮与

div

的左侧对齐，不会居中。我曾尝试在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);
    }
}

---

在css中将边距设置为

auto

：

#letter {margin:auto;...}

---

将按钮放置在带有

边距的
中：自动

在

div#letterbar中

我敢打赌，您是在每个元素上设置对齐，而不是在容器上设置对齐

试试

#字母条{文本对齐：居中；}

表示文本对齐不控制块元素本身的对齐，只控制其内联内容

我知道这是切切实实的，对目前的问题并不是很有帮助，但是考虑使用“类”而不是“ID”。W3规范（，与HTML4相同，但我的代表太低，不能发布超过2个链接-这是一个毫无意义的限制）说

id

在文档中必须是唯一的，并且您的循环使用相同的

id

输出多个输入

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

编辑

---

正如我在一篇评论中所说的，如果您将

float

输入移到左侧，

text align

将无效。如果您只想将输入置于div的中心，请从input中删除float并将div文本对齐。

我同意JanParowka在前面的帖子中所说的话

如果div的id是信箱，那么您应该这样做

#信箱{文本对齐：居中；}

---

你的意思是我应该加上页边空白：自动；将属性放入字母栏？这仍然不会使按钮居中。不，在

div

内部

div#letterbar

在我的例子中，我使用#letterbar只是为了找到要插入的字母的正确位置，属性本身在单独的类中指定。无论如何，添加文本对齐：居中并不能解决这个问题。要不要分享一个HTML和CSS的例子，最好是JSFIDLE格式？还有-我才明白-你在漂浮字母，对吗？这就是问题所在。浮动是绝对必要的吗？不再需要共享示例，因为在删除float:left属性后，字母现在在中心正确对齐，谢谢您的帮助。

#letter {margin:auto;...}