將內容與div的底部對齊而不使用位置：絕對

嘿，有沒有辦法可以將div標籤的內容與底部對齊，而不使用position:absolute。幾乎在互聯網上的所有其他解決方案使用position:absolute和/或vertical-align:bottom，但有沒有辦法做到這一點，而不使用position:absolute，比方說，例如我如何對齊圖像中的貓到這個fiddle div的底部謝謝！將內容與div的底部對齊而不使用位置：絕對

我想到的另一個解決方案是填充頂部的空白空間，以便圖像被推到底部，但我也不知道如何做到這一點。

P.S.如果可能的話，請不要在div中使用表格。

來源

2014-06-27 Sajeeb

出於純粹的個人好奇心說，爲什麼不使用使用'position'（不一定是絕對的）或對齊？爲什麼說，「有工具存在，所以讓我們使用......別的東西！」我在這裏的想法是什麼？ –

我沒有使用其他位置的問題：但只是不是絕對的。當添加移動元素時，它會使圖像位置像瘋狂一樣起作用 – Sajeeb

啊，好的。謝謝。所以這就是真正的煩惱。我一直在想這樣的問題。再次感謝。 –

你可以嘗試像

<div style="border:1px solid black; height:100px; display:table; width:100%;"> 

    <div style="display:table-cell; vertical-align: bottom;"> 
     <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" /> 
    </div> 
</div>

來源

2014-06-27 06:45:25 PokeItWithAStick

您可以使用Flexbox的來解決這個問題：http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

來源

2014-06-27 06:41:08 sahbeewah

Demo

HTML

<div class="content">Content</div> 
<div class="footerLike"> 
    <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" /> 
</div>

CSS

.content { 
    height:calc(100% - 102px); /* 100% - height of footer - borders */ 
} 
.footerLike { 
    border:1px solid black; 
    height:100px; 
} 
body, html { 
    height: 100%; 
    width: 100%; 
    margin:0; 
    padding:0; 
}

Demo，在評論

<div class="footerLike"> 
    <div class="dummy"><!-- you can put anything here --></div> 
    <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" /> 
</div> 


.footerLike { 
    border:1px solid black; 
    height:100%; 
} 
img { 
    height: 100%; 
    display: block; 
} 
.dummy { 
    height: calc(100% - 100px); 
} 
body, html { 
    height: 100%; 
    width: 100%; 
    margin:0; 
    padding:0; 
}

來源

2014-06-27 06:51:47 4dgaurav

當我說填補空的空間與我在談論包含圖像的div內的空白空間。 – Sajeeb

將內容與div的底部對齊而不使用位置：絕對

回答

相關問題