如何將圖像對齊div的底部？

Question

我正在嘗試使用vertical-align將圖像對齊到out div元素的底部，但是這種vertical-align似乎不起作用，圖像根本不移動。

 <div class="row">
     <div class="col-md-1">
       <img src="../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
     </div>
     <div class=col-md-11 >
        <div  style="overflow:auto;height:300px"></div>
     </div>
</div>

我正在使用bootstrap類進行對齊。 有沒有什么可以使圖像div對齊外部div的底部？這是第二個div的height ，即300px; 。

Answer 1

如果我理解正確的話，這樣的事情就可以解決問題：

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  bottom: 0;
}

您可以將這些類分別添加到DIV和IMG。

看起來父div將是300px高，因為相鄰div中的子節點設置了高度。 如果您指定父級的高度，那么您絕對可以相對於父級的大小定位子級 。

如果未將父項設置為position：relative，則子項將相對於其他項（如頁面）進行定位。

Vertical-align不起作用，因為IMG是一個內聯元素，您期望的行為依賴於表格單元格。 對於內聯元素，垂直對齊是相對於線而不是父容器，因此與文本對齊的圖像將位於相對於給定文本行的不同位置。

請務必查看文檔以獲取此問題和其他問題，這在MDN中有詳細說明 。

Answer 2

您可以使用flexbox。 將父樣式應用於DIV。 img不需要額外的造型

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

如果您沒有為任務管理員添加前綴以獲得最大兼容性，那么您可以添加以下內容。

.parent {    
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; 
}

目前使用的瀏覽器中有97％支持flex。