如何将标签放在盒子中间

Ragmah 发表于 Dev

拉格玛

下面是我的代码创建三个箱子，内带链接的文本。

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

这是我的小提琴：https : //jsfiddle.net/Wosley_Alarico/opztnkx9/1/

我是否有更好的方法将链接放在框的中间而不必使用margin-top？提前致谢

小羊羔

由于您已经在使用a flexbox，因此您也可以.amount_box > div同时使用aflexbox并将align-items: center其垂直对齐-请参见下面的演示：

更新小提琴

.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 -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。