[FIXED] How can I put an a tag in the middle of a box

Issue

The following is my code to create three boxes with link text inside it.

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

Here my fiddle: https://jsfiddle.net/Wosley_Alarico/opztnkx9/1/

Is there a better way for me to put the links in the middle of the box with having to use margin-top? Thanks in advance

Solution

As you are already using a flexbox, you can make each of .amount_box > div also a flexbox and give it align-items: center to align it vertically - see demo below:

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

Answered By - kukkuz

Answer Checked By - Senaida (PHPFixing Volunteer)