將div對齊到父項的底部

我有一個div嵌套在另一個div的內部，我希望它位於父div的底部。我能夠得到這個工作，但有一個小問題。嵌套div中的文本在父div下面延伸。我怎樣才能防止這一點？注意：這不是圖像下方的額外空間。 div的底部不與圖像的底部對齊。將div對齊到父項的底部

.imgOverlayTitle { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
} 
 

 
.imgOverlayDesc { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
}

<div style="position: relative; display: inline-block;"> 
 
    <div class="imgOverlayTitle">Title goes here</div> 
 
    <div class="imgOverlayDesc">Description goes here</div> 
 
    <img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/cat-care/images/HP_PCC_md_0130_cat53.jpg" /> 
 
</div>

來源

2017-08-11 AndroidDev

的[內部DIV圖像具有圖像下方的額外空間（可能的複製https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space - 下面的圖像） –

@MohammadUsman我認爲OP意味着字母'g'和'p'超過父div，並且OP不想要這樣，除非我錯了 – Swellar

@Swellar一旦額外空間形象會消失，他會得到他想要的。 –

一種解決方案是使div容器一個Flexbox的。見下文。

.imgOverlayTitle { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
} 
 

 
.imgOverlayDesc { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
}

<div style="position: relative; display: flex;"> 
 
    <div class="imgOverlayTitle">Title goes here</div> 
 
    <div class="imgOverlayDesc">Description goes here</div> 
 
    <img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/cat-care/images/HP_PCC_md_0130_cat53.jpg" /> 
 
</div>

來源

2017-08-11 07:39:37 Gerard

這實際上有效。 flex-direction需要設置爲列。太感謝了！ – AndroidDev

不客氣。祝你的項目好運。 – Gerard

將div對齊到父項的底部

回答

相關問題