使用JavaScript定位按鈕

基本上我有一個水平的div，其中創建了按鈕（在此代碼中稱爲字母）。但問題是，這些按鈕與div的左側對齊，並且不會居中。我曾嘗試在標籤#letter下的CSS文檔中使用text-align:center，但它仍然不會居中按鈕。使用JavaScript定位按鈕

如果你需要它，這裏是按鈕獲得創建的代碼部分：

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

來源

2013-10-12 danrodi

我敢打賭，你正在設置每個元素上的對齊而不是容器。

嘗試#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中，請從輸入中刪除浮動，然後文本對齊div。

來源

2013-10-12 15:34:17 Konrad

在我的情況下，我只用#letterbar找到要插入的字母的正確位置，屬性本身在單獨的類中指定。無論如何，添加text-align：center並不能解決問題。 – danrodi

小心分享一個你的HTML和CSS的例子，最好是JSFiddle形式？另外 - 它只是對我而言 - 你在漂浮字母，對吧？這是問題。浮球*是絕對必要的嗎？ – Konrad

無需再分享示例，因爲在刪除float：left屬性後，現在字母在中心正確對齊，感謝您的幫助。 – danrodi

套裝在您的css的邊緣auto：

#letter {margin:auto;...}

來源

2013-10-12 15:23:08 Joren

將按鈕放置在一個<div>與margin: auto;內部的div#letterbar。

來源

2013-10-12 15:23:15 CIRCLE

你的意思是我要補充保證金：汽車;財產進入信條？這仍然不會使按鈕居中。 – danrodi

不，在'div'裏面'div＃letterbar'內的div' – CIRCLE

我同意JanParowka他在以前的帖子中說過的話。

如果DIV的ID是那麼信箱你應該做的

#letterbox {文本對齊：中心;}

來源

2013-10-12 15:45:23 Vishal

使用JavaScript定位按鈕

回答

相關問題