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>

在容器底部对齐图像

2 个答案: