如何垂直对齐并均匀分布两个按钮？

Question

我正在尝试将两个按钮水平居中对齐，并在浏览器 window 上垂直均匀分布，如下图所示：

 #buttonArea { display: flex; flex-direction: column; } #addButton { margin: auto; display: block; } #eraseButton { margin: auto; display: block; }

 <div id="buttonArea"> <button id="addButton">ADD</button> <button id="eraseButton">ERASE</button> </div>

按钮水平居中，但我不知道如何垂直对齐它们，以便它们均匀分布。 （例如添加：33.33%，擦除：66.66%）

如何像我的照片一样对齐按钮？

Answer 1

HTML

<div id="Area">
  <div class="container">
  <button id="addButton">ADD</button>
  <button id="eraseButton">ERASE</button>
  </div>
</div>

CSS

#Area {
  width: 100vw;
  height: 100vh;
}

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center
}

addButton, eraseButton{
    width: 50px;
    display: inline-block,
}

我正在做的是您需要设置页面的宽度和高度，以便您可以将项目设置在您想要的位置。 然后将按钮的容器设置为 height: 100% 因为你想水平居中对齐，垂直均匀分布。

接下来最重要的是 justify-content: space-around; 由于您使用的是 flex，我希望您知道这一点

Answer 2

使用justify-content: space-around在每个按钮周围分配相等的垂直空间，并align-items: center水平对齐元素。

顺便说一句， justify-content适用于主轴，而align-items适用于横轴。 通常， justify-content适用于 x 轴，因为flex-direction的默认值是row 。 但是，由于我们使用了flex-direction: column ，所以主轴现在是 y 轴。

 #buttonArea { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 100vh; border: 1px solid black; }

 <div id="buttonArea"> <button id="addButton">ADD</button> <button id="eraseButton">ERASE</button> </div>

Answer 3

您需要添加position:relative to parent div然后为按钮添加position: absolute; 并使用top: xx %; 属性使其在高度的 33% 和 66% 处垂直对齐。

 #buttonArea { display: flex; justify-content: center; align-items: center; height: -webkit-fill-available; width: 100% position:relative; text-align:centre; } #addButton { display: block; top: 33.33%; position:absolute; } #eraseButton { top: 66.66%; position:absolute; display: block; }

 <div id="buttonArea"> <button id="addButton">ADD</button> <button id="eraseButton">ERASE</button> </div>

希望这可以帮助。 干杯!

Answer 4

使用 position:relative 并相应地管理坐标