html - 我怎样才能把一个标签放在一个盒子的中间

Question

以下是我创建三个框的代码，其中包含链接文本。

HTML:

<div class="amount-box">
    <div class="25">
      <a href="">$25</a>
    </div>
    <div class="50">
      <a href="">$50</a>
    </div>
    <div class="100">
      <a href="">$100</a>
    </div>
  </div><!-- amount box -->

CSS:

.amount-box{
  display: flex;
  justify-content: center;
}
.amount-box > div{
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 5px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 5px;
}

这是我的 fiddle :https://jsfiddle.net/Wosley_Alarico/opztnkx9/1/

有没有更好的方法让我不得不使用 margin-top 将链接放在框的中间？提前致谢

Answer 1

因为你已经在使用一个flexbox，你可以让每个.amount_box > div 也成为一个flexbox并给它 align-items: center 垂直对齐 - 请参见下面的演示:

Update fiddle

.amount-box {
  display: flex;
  justify-content: center;
}
.amount-box > div {
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 5px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="amount-box">

  <div class="25">
    <a href="">$25</a>
  </div>
  <div class="50">
    <a href="">$50</a>
  </div>
  <div class="100">
    <a href="">$100</a>
  </div>
</div>
<!-- amount box -->