如何均匀分布div答案

【问题标题】：How to evenly space divs如何均匀分布div
【发布时间】：2019-09-14 22:32:03
【问题描述】：

所以我有两个按钮，我希望它们间隔均匀。我花了几个小时寻找解决方案，但找不到，所以我需要一些帮助。我的代码如下。

<!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>

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

我尝试过使用弹性间距、百分比、垂直高度/宽度。没有任何效果。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：