如何垂直對齊並均勻分布兩個按鈕？

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 並相應地管理坐標