I'm currently working on a layout with a horizontal div where buttons (referred to as letters in the code) are being created. However, I've encountered an issue where the buttons are aligning to the left side of the div and I'm unable to center them. Despite applying text-align:center in the CSS for the #letter label, the buttons still refuse to center.
If necessary, here is the section of code responsible for generating the buttons:
// Generates letters for the selected 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);
}
}
Here is the section of code where the button attributes are defined:
#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}