在容器底部對齊圖像

Question

如何將圖像與div的底部對齊？ 我希望由$ {addIcon}表示的圖像位於其容器的底部，該容器是dt。 我正在使用AngularJS和Typescript。

 <td ng-repeat="slotContent in slotRow.Slots" class="${styles.calendarTableTD}">
             <div ng-repeat="booking in slotContent.Bookings">
              <span ng-show="booking.approved" class="${styles.calendarApprovedBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
              <span ng-show="booking.approved === false" class="${styles.calendarBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
             </div>
             <div style="cursor:pointer;" ng-show="slotContent.ShowAddIcon" ng-click="vm.newBooking(slotContent.SlotNumber, slotContent.SlotDate)">
                <img  src="${addIcon}"  style="height:20px; width: 20px;  align:vertical=bottom;">
             </div>
           </td>

即使vertical-align = bottom; 它停留在中間。

Answer 1

給包含div的“ display：flex”和“ align-items：flex-end”應該可以解決問題。

<td ng-repeat="slotContent in slotRow.Slots" class="${styles.calendarTableTD}">
             <div ng-repeat="booking in slotContent.Bookings">
              <span ng-show="booking.approved" class="${styles.calendarApprovedBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
              <span ng-show="booking.approved === false" class="${styles.calendarBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
             </div>
             <div style="cursor:pointer; display: flex; align-items: flex-end;" ng-show="slotContent.ShowAddIcon" ng-click="vm.newBooking(slotContent.SlotNumber, slotContent.SlotDate)">
                <img  src="${addIcon}"  style="height:20px; width: 20px;  align:vertical=bottom;">
             </div>
           </td>

Answer 2

添加text-align: center; 如果您是內聯的。

<img  src="${addIcon}"  style="height:20px; width: 20px;  text-align: center;">

編輯：擺脫所有position: absolute; 並align影響圖像的樣式，並執行以下示例：

 div { display: flex; justify-content: center; align-items: center; height: 150px; border: 1px solid blue; } div+div { margin-top: 10px; } div img+img { margin-left: 10px; } 

 <div> <img src="https://source.unsplash.com/random/64x64" alt="Example image"> </div> <div> <img src="https://source.unsplash.com/random/64x64" alt="Example image"> <img src="https://source.unsplash.com/random/64x64" alt="Example image"> </div>