I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the left button floating on the left, the right button on the right, and the .buttons div matching the width of the image.
Below is my HTML code:
<div class='content'>
<img class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
This is what my CSS looks like:
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.nft {
max-width: 60%;
max-height: 80%;
display: block;
margin: auto;
margin-bottom: 32px;
}
.buy {
float: left;
}
.share {
float: right;
}