Trying to align 2 buttons and logo in footer using Bootstrap - html

Question

Trying to build a new site using Bootstrap-4
I'm trying to align a logo to the left, a link button in the center and a link button to the right of a footer div. At the moment, I've got it working except the logo is vertically aligned so that its top is middled rather than the center of the image, so its hanging low!
I've tried vertical aligning it and experimented with justify contents settings.
.footer {
background-color: #68B3E2;
text-align: center;
padding: 30px;
justify-content: space-around;
}
.logo {
display:inline-block;
float:left;
}
.center_btn {
display:inline-block;
float:none;
}
.right_btn {
display:inline-block;
float:right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer">
<img class=logo src="images/logo.png" width="120" height="120" alt="">
<a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
<a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>

Answer 1

This is simpler using the Bootstrap flexbox util classes (no need for all the extra CSS)...
<div class="footer d-flex justify-content-between align-items-center">
<img class=logo src="//placehold.it/120" width="120" height="120" alt="">
<a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
<a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>
https://codeply.com/p/QpjEZtn11G

Answer 2

Good day! Just use Flexbox CSS, keep it simple.
.footer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #68B3E2;
padding: 30px;
}
<div class="footer">
<img class=logo src="https://avatars.mds.yandex.net/get-pdb/2978990/ac5c48be-c30e-4595-9f4b-72fa8d31addb/s375" width="120" height="120" alt="">
<a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
<a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>