Bootstrap 4 div flexbox内的align-items-bottom

Question

这很简单。我正在尝试将 gear svg 图像对齐项目底部到 div 的底部中心。但是，它始终保持在 div 的顶部。我尝试了align-items-center 和align-bottom 选项。

会发生什么

应该如何

.gear {
  height: 50px;
	}
.banner {
  height: 70px;
}

<footer>
  <div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
	<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>

Answer 1

没有align-items-bottom课。班级名称是 align-items-end..

<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
        <img class="gear d-flex" src="//placehold.it/300x70">
</div>

https://www.codeply.com/go/ub6hNpd9TL