尝试使用 Bootstrap 对齐页脚中的 2 个按钮和徽标

Question

尝试使用 Bootstrap-4 构建一个新网站

我正在尝试将徽标对齐到左侧，将链接按钮对齐在中间，将链接按钮对齐到页脚 div 的右侧。目前，我已经让它工作了，只是徽标是垂直对齐的，因此它的顶部居中而不是图像的中心，所以它挂得很低！

我尝试了垂直对齐并尝试了对齐内容设置。

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