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

の内側<div>にボタンを配置します。margin: auto;div#letterbar

于 2013-10-12T15:23:15.053 に答える
0

コンテナではなく、各要素に整列を設定していると思います。

試す#letterbar { text-align: center;}

MDN 仕様によると、text-align はブロック要素自体の配置を制御せず、インライン コンテンツのみを制御します。

これは接線であり、当面の問題にはあまり役に立たないことはわかっていますが、「id」の代わりに「class」を使用することを検討してください。W3 仕様 ( HTML5、HTML4 と同じですが、私の担当者は低すぎて 2 つ以上のリンクを投稿できません。これは無意味な制限です) はidドキュメント内で一意である必要があり、ループは同じid.

JSFiddle の例: http://jsfiddle.net/UuxuX/

編集

コメントで言ったようfloatに、左に入力するtext-alignと無効になります。入力を div の中央に配置するだけの場合は、フロートを入力から削除し、div のテキストを揃えます。

于 2013-10-12T15:34:17.713 に答える
0

css でマージンを次のように設定autoします。

#letter {margin:auto;...}
于 2013-10-12T15:23:08.257 に答える