现在的样子
我想用某种方式把它包装成这样
就像我想要的那样
HTML
<div className="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>
CSS
box-sizing: border-box;
}
body{
background: rgb(75, 109, 221);
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div{
display: flex;
justify-content: center;
position: relative;
top: 100px;
}
button{
height: 100px;
width: 150px;
background-color: white;
font-size: large;
}
您可以使用flex-direction:column来实现这一点，它基本上颠倒了justify-content和align-items的用法。然后，设置align-items:center和justify-content:space-betweer并设置容器的高度（我使用了300px)。
null
* {
box-sizing: border-box;
}
body {
background: rgb(75, 109, 221);
color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
top: 100px;
height: 300px;
}
button {
height: 100px;
width: 150px;
background-color: white;
font-size: large;
}<div className="Home">
<button class="donate-blood-button">Donate Blood</button>
<button class="request-blood-button">Request Blood</button>
</div>