Question

所以我有两个按钮，我希望它们均匀地隔开。我已经花了数小时寻找解决方案，但找不到解决方案，因此我需要一些帮助。我的代码在下面。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Moocraft's Tic-Tac-Toe</title>

  <style type="text/css">
    .hv-center {
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }
    
    .playerChoose {
      background: #0000ff;
      background: linear-gradient(#0000ff, #6b6bff);
      border-radius: 5px;
      padding: 8px 20px;
      color: #ffffff;
      display: inline-block;
      font: normal bold 24px/1 "Calibri", sans-serif;
      text-align: center;
      text-shadow: 1px 1px #000000;
    }
  </style>
</head>

<body style="text-align: center;">
  <div id="gameTypePick" style="" class="hv-center">
    <button id="randomPlayer" class="playerChoose">
			<h1>Random Person</h1>
		</button>
    <button id="friendPlayer" class="playerChoose">
			<h1>Friend</h1>
		</button>
  </div>
</body>

</html>

无论设备大小如何，我都希望两个按钮均匀间隔开。如果有人可以帮助我，那就太好了！

我尝试过使用弹性间距，百分比，垂直高度/宽度。什么都没有。

Answer 1

您可以忽略hv-center的样式，并尝试以下flexbox属性：

#gameTypePick {
  display: flex;
  justify-content: space-evenly; /* Equal gap between elements */
  align-items: center; /* Vertical alignment */
  height: 100vh; /* You can use height: 100% of the parent container */ 
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Moocraft's Tic-Tac-Toe</title>

  <style type="text/css">
    .playerChoose {
      background: #0000ff;
      background: linear-gradient(#0000ff, #6b6bff);
      border-radius: 5px;
      padding: 8px 20px;
      color: #ffffff;
      display: inline-block;
      font: normal bold 24px/1 "Calibri", sans-serif;
      text-align: center;
      text-shadow: 1px 1px #000000;
    }
  </style>
</head>

<body style="text-align: center;">
  <div id="gameTypePick" style="" class="hv-center">
    <button id="randomPlayer" class="playerChoose"> 
      <h1>Random Person</h1>
    </button>
    <button id="friendPlayer" class="playerChoose">
      <h1>Friend</h1>
    </button>
  </div>
</body>

</html>

如何平均分配div

1 个答案: