纽扣怎么包？

Question

现在的样子

我想用某种方式把它包装成这样

就像我想要的那样

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;
    
}

Answer 1

您可以使用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;
}

html prettyprint-override"><div className="Home">
  <button class="donate-blood-button">Donate Blood</button>
  <button class="request-blood-button">Request Blood</button>
</div>