Попытка выровнять 2 кнопки и lo go в нижнем колонтитуле, используя Bootstrap

Question

Пытаясь создать новый сайт, используя Bootstrap -4

Я пытаюсь выровнять lo go влево, кнопку ссылки в центре и кнопку ссылки справа от нижний колонтитул На данный момент у меня это работает, за исключением того, что lo go выровнен по вертикали, так что его верхняя часть находится посередине, а не по центру изображения, так что он висит низко!

Я пробовал выравнивание по вертикали он и экспериментировал с настройками обоснования содержимого.

.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

Это проще, если использовать Bootstrap классы flexbox util (не нужно для всех дополнительных 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

Добрый день! Просто используйте Flexbox CSS, будьте проще.

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