css 在一列中居中放置3个按钮

mccptt67 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(196)

我想做三个正方形的按钮，在我的网站中间居中。它在一个分裂，所以当屏幕在小，按钮是在行，当屏幕在大，按钮是在列。

.split {
  display: flex;
  flex-direction: column;
  column-gap: 50px;
}

@media (min-width: 40em) {
  .split {
    flex-direction: row;
  }
  .text-center {
    text-align: center;
  }
  button {
    display: flex;
    justify-content: space-evenly;
    background: #ADCEAC;
    width: 80%;
    line-height: 250px;
    font-family: "Tenor Sans", sans-serif;
    border: none;
    border-radius: 15px;
  }

<div class="text-center">
  <div class="split">
    <div>
      <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
    </div>
    <div>
      <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
    </div>
    <div>
      <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
    </div>
  </div>
</div>

当它是行时，它是好的。但是当它是列时，按钮是最左端的3条长线。

css

来源：https://stackoverflow.com/questions/75416911/center-3-buttons-in-a-column

2条答案

按热度按时间

kmbjn2e31#

您只需要定义按钮的width属性：

.split {
  display: flex;
  flex-direction: column;
  column-gap: 50px;
}

@media (min-width: 40em) {
  .split {
    flex-direction: row;
  }
  button {
    margin-bottom: 0;
  }
  .text-center {
    text-align: center;
  }
}

button {
  display: flex;
  justify-content: space-evenly;
  background: #ADCEAC;
  width: 70px;
  font-family: "Tenor Sans", sans-serif;
  border: none;
  border-radius: 15px;
  margin-bottom: 10px;
}

<div class="text-center">
  <div class="split">
    <div>
      <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
    </div>
    <div>
      <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
    </div>
    <div>
      <button onclick="window.location.href = 'FirstPage.html';">HOME</button>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-14

c0vxltue2#

.split {显示：弯曲弯曲方向：柱柱间隙：50 px对齐内容：中心

赞(0）回复(0）举报 2023-02-14