我有一個包含3個按鈕的div。相同的風格，但后退按鈕不在中間對齊，而是在左側。有人知道這里的問題是什么嗎？前兩個按鈕工作正常，直到您單擊VsComputer或VsPlayer，它將顯示3個新按鈕，在這里的& quot后退& quot按鈕沒有居中對齊。

function firstTurn(turn) {
  if (turn == 'computer') {
    ComputerMove();
  }
  if (turn == 'player') {
    PlayerMove();
  }

  document.getElementById("turnButtons").style.display = "none";
}

function goBack() {
  document.getElementById("modeButtons").style.display = "block";
  document.getElementById("turnButtons").style.display = "none";
}

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "block";
  document.getElementById("backToMode").style.display = "block";
}

.buttons {
  text-align: center;
}

.style1 {
  background-color: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.style1:hover {
  background-color: #ff4d4d;
}

<div id="modeButtons" class="buttons">
  <button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
  <button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>

<div id="turnButtons" class="buttons" style="display:none;">
  <button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
  <button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
  <button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>

在Javascript中，您將display屬性設置為block

document.getElementById("backToMode").style.display="block";

只需將其更改為內聯塊就可以解決問題。

document.getElementById("backToMode").style.display="inline-block";

完整的示例，唯一更改的行是上面提到的行:

function firstTurn(turn) {
  if (turn == 'computer') {
    ComputerMove();
  }
  if (turn == 'player') {
    PlayerMove();
  }

  document.getElementById("turnButtons").style.display = "none";
}

function goBack() {
  document.getElementById("modeButtons").style.display = "block";
  document.getElementById("turnButtons").style.display = "none";
}

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "block";
  document.getElementById("backToMode").style.display = "inline-block"; // this line need to be inline-block
}

.buttons {
  text-align: center;
}

.style1 {
  background-color: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.style1:hover {
  background-color: #ff4d4d;
}

<div id="modeButtons" class="buttons">
  <button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
  <button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>

<div id="turnButtons" class="buttons" style="display:none;">
  <button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
  <button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
  <button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>

方法1:

我建議在這種情況下使用flexbox

使用css flexbox及其屬性

在HTML文件中，我稍微修改了一下結構，以便使用flexbox。兩個父div的css屬性都應該是display: flex

對于第一個div中的CSS

display: flex // to set the display property to flex
justify-content: center // to place the content horizontally in the center

因為第二個div伸縮方向設置為列

flex-direction: column;
align-items: center // to place the content horizontally in the center

要了解有關flexbox使用的更多信息，請參考: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我還為所有的按鈕添加了相同的寬度，這樣當你點擊一個按鈕時，布局保持一致

button {
  width: 150px;
}

以下是片段

function firstTurn(turn) {
  if (turn == 'computer') {
    ComputerMove();
  }
  if (turn == 'player') {
    PlayerMove();
  }

  document.getElementById("turnButtons").style.display = "none";
}

function goBack() {
  document.getElementById("modeButtons").style.display = "flex"; // change this to "flex"
  document.getElementById("turnButtons").style.display = "none";
}

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "flex"; // change this to "flex"
  document.getElementById("backToMode").style.display = "block";
}

.buttons {
  display: flex;
  justify-content: center;
}

.buttons2 {
  flex-direction: column;
  align-items: center;
}

button {
  width: 150px;
}

.style1 {
  background-color: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.style1:hover {
  background-color: #ff4d4d;
}

<div id="modeButtons" class="buttons">
  <button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
  <button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>

<div id="turnButtons" class='buttons2' style="display:none;">
  <div class="buttons">
      <button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
  <button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
  </div>
    <button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>

這里，您沒有為函數computermove()和Playermove()提供任何實現，但是您正在調用函數FirstTurn()。所以提供實現并調用它們，你將不會得到任何錯誤