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:
.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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.