0

基本上我有一个水平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}
4

4 回答 4

2

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

于 2013-10-12T15:23:15.053 回答
0

auto在 CSS 中设置边距：

#letter {margin:auto;...}
于 2013-10-12T15:23:08.257 回答
0

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

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

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

我知道这有点切题，对手头的问题没有太大帮助，但考虑使用“类”而不是“id”。W3 规范（HTML5，与 HTML4 相同，但我的代表太低，无法发布超过 2 个链接 - 这是一个毫无意义的限制）说id必须在文档中是唯一的，并且您的循环会吐出具有相同的多个输入id。

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

编辑

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

于 2013-10-12T15:34:17.713 回答
0

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

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

#letterbox { 文本对齐：居中；}

于 2013-10-12T15:45:23.600 回答