Javascript 将三个按钮放在同一行的三个div中居中

我有三个按钮，在三个div内，我需要将它们放在同一行的中心。
它们是使用createElement（）方法创建的。按钮和Div.
这是我知道的在函数、脚本标记或if-else语句中创建按钮的唯一方法。或者至少是唯一适合我的方法
我打赌在这一点上，视觉效果会有所帮助

function threeGameButtons()
{
    buttonDiv = createElement("div");
    buttonDiv = setAttribute("center");
    //This ^ has been to center the divs, and has done so by putting them on  
    //top of each other. I believe I understand why though.
    gameButton = document.createElement("BUTTON");
    gameText = document.createTextNode("text");
    gameButton = appendChild(gameText);
    buttonDiv.id = "buttonID";
    gameButton.onclick = myFunction;
    //calls a function for the game
    buttonDiv.appendChild(gameButton);
    document.body.appendChild(buttonDiv);

    //two more buttons
}

所以这三个按钮是在游戏早期的一个函数中调用的。（我想我没有提到，但现在可能很明显：这是一个游戏）。
我很想创建一个容器div并将其居中，但我完全不知道在函数中这样创建div时如何操作。
我尝试了一些CSS来将div和按钮居中。哦，天哪，我试过了。但我的努力毫无结果。我可以给你一切，但我必须回想一下我尝试过的所有CSS方法。
不过我试过一个：

#buttonID2 (Second and center button)
{
    margin:0 auto;
}
#buttonID (First and left button)
{
    display:inline-block;
    position:absolute;
    left:200px;
}
#buttonID3 (Third and right Button)
{
    display:inline-block;
    position:absolute;
    right:200px;
}

当我尝试此操作时，第三个按钮会转到第二行，但会转到右侧。
我尝试过在边距中添加内联块：0自动；它会阻止第二个按钮居中。
另外两个仍然在中间偏左偏右。
我的意图并不是让它们向左和向右走那么远，但就目前而言，我只是不希望它们与中间的按钮重叠

---

一张便条；所有这些都发生在调用它们的函数发生的页面上。我不确定这是否有区别。我想我会把它放进去，以防万一。

所以你想在一个DIV标签内添加三个按钮，inline。如果我正确理解了你的问题，我想这就是你想要的：

function threeGamesButton() {

var x =document.getElementById("box");

var btnSet = document.createElement("div");
btnSet.setAttribute("style","border: 1px solid black; width:800; height:300;" )

var firstButton = document.createElement("button");
firstButton.setAttribute("style","border: 1px solid black; width:200; height:250;" );
firstButton.setAttribute("onClick","myFunction1()" );
firstButton.innerText ="Button 1";

var secondButton = document.createElement("button");
secondButton.setAttribute("style", "border: 1px solid black; width:200; height:250;");
secondButton.setAttribute("onClick","myFunction2()" );
secondButton.innerText ="Button 2";

var thirdButton = document.createElement("button");
thirdButton.setAttribute("style", "border: 1px solid black; width:200; height:250;")
secondButton.setAttribute("onClick","myFunction3()" );
thirdButton.innerText ="Button 1";

btnSet.appendChild(firstButton);
btnSet.appendChild(secondButton);
btnSet.appendChild(thirdButton);

x.appendChild(btnSet);
}

在html页面中包含id为box的div。并从任何位置调用函数。您可以使用

firstButton.className = "firstButton" 

---

然后为该名称添加css部分。但是如果内部按钮的总宽度大于插入所有这些按钮的div标记，那么最后一个按钮将自动传递到第二个raw

所以我自己解决了这个问题，为任何需要它的人。
我把它放在这儿了。
但是按钮的代码部分是这样的（忽略奇怪的函数名）：

函数continueIntro（）
{
document.body.innerHTML=''；
var continueParagraph=document.createElement（“p”）；
continueParagraph.innerHTML=“这些是我最终得到的按钮
”+
“在同一条线上居中：”；
document.body.appendChild（continueParagraph）；
getGoldButtons（）；
}
函数getGoldButtons（）
{
buttonDiv2=document.createElement（“div”）；
buttonDiv2.setAttribute（“对齐”、“居中”）；
gameButton2=document.createElement（“按钮”）；
gameText2=document.createTextNode（“第一个选项”）；
gameButton2.appendChild（gameText2）；
buttonDiv2.id=“buttonDiv2”；
gameButton2.onclick=caveGetGold；
buttonDiv2.appendChild（游戏按钮2）；
gameButton3=document.createElement（“按钮”）；
gameText3=document.createTextNode（“第二个选项”）；
gameButton3.appendChild（gameText3）；
gameButton3.onclick=forestGetGold；
buttonDiv2.appendChild（游戏按钮3）；
gameButton4=document.createElement（“按钮”）；
gameText4=document.createTextNode（“第三个选项”）；
gameButton4.appendChild（gameText4）；
gameButton4.onclick=隧道黄金；
buttonDiv2.appendChild（游戏按钮4）；
document.body.appendChild（buttonDiv2）；
}

为什么不使用表格？另外，如果你能在小提琴（或你喜欢的任何网站）里提供一个例子，那也会很有帮助。我真是个傻瓜。。不停摆弄我是说，你是在说我看到人们一直在这里使用的JSFIDLE吗？你能在函数中使用表吗？是的，我指的是JSFIDLE。我也不确定你所说的“你能在函数内部使用表”是什么意思。我认为这是一个布局问题，而不是javascript。如果我错了，请进一步澄清您的问题。是否需要在JS中创建按钮？为什么这么痛苦？@Kippie-我对整个函数有一个解释（我可能也会把它添加到最初的帖子中）。我认为这是最好的解释或帮助方式。我不确定，你可以决定。我想这可能是一个JavaScript和布局问题，因为我需要定位的按钮都在JavaScript中。。所以我听你说的大部分。。但是如果我想在调用另一个函数时显示按钮，我将如何管理它。我不确定这是不是一个愚蠢的问题。。但是，我不确定将box id元素放在哪里。那会是什么样的元素呢？（我对可能的JS元素不太熟悉，我真正知道/能想到的唯一一个是一段。这是正确的吗？）如果有很多问题，我很抱歉^；所以我后来明白了怎么做你说的。我意识到我只是有点困惑，没有正确阅读。但我把它放进去试了试，结果没用。至少，对我来说不是。按钮根本没有出现在页面上。

function continueIntro() 
{
    document.body.innerHTML = '';
    var continueParagraph = document.createElement("p");
    continueParagraph.innerHTML = "<center>These are the buttons I finally got <br>" +
    "to center on the same line: </center>";
    document.body.appendChild(continueParagraph);

        getGoldButtons();    
}

function getGoldButtons()
{
    buttonDiv2 = document.createElement("div");
    buttonDiv2.setAttribute("align","center");

    gameButton2=document.createElement("BUTTON");
    gameText2=document.createTextNode("First Option");
    gameButton2.appendChild(gameText2);
    buttonDiv2.id = "buttonDiv2";
    gameButton2.onclick = caveGetGold;
    buttonDiv2.appendChild(gameButton2);

    gameButton3=document.createElement("BUTTON");
    gameText3=document.createTextNode("Second Option");
    gameButton3.appendChild(gameText3);
    gameButton3.onclick = forestGetGold;
    buttonDiv2.appendChild(gameButton3);

    gameButton4=document.createElement("BUTTON");
    gameText4=document.createTextNode("Third Option");
    gameButton4.appendChild(gameText4);
    gameButton4.onclick = tunnelGetGold;
    buttonDiv2.appendChild(gameButton4);
    document.body.appendChild(buttonDiv2);    
}