將段落垂直對齊到div的底部將不起作用

Question

我有以下問題：

我有一個div，在這個div中，我有一個包含5個圖像的段落（p標簽）。 我希望將整個段落放置在div容器的底部，但是我沒有設法完成它，我已經嘗試過使段落顯示內聯框或表格單元格，並將其垂直對齊到底部，但是沒有作品。

也許有人可以幫助我嗎？

碼：

Div容器：

#info {
    float:left;
    text-align:center;
    width:770px;
    height:600px;
    background:#fcfcfc;
    border:thin solid;
    border-color:#CCC;
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px;
    font-family: "Myriad Pro";
    font-size: 12px;
}

該段應在div的底部

 <p style="display:inline-block; vertical-align:bottom;">
        <!-- Twitch Chat - Insert Twitch Id -->
        <a href="http://de.twitch.tv/chat/embed?channel=guardsmanbob&amp;popout_chat=true"><img id="ov" src="../Images/List/diverse/button_twitchchat.png"  /></a> 
        <!-- IRC Chat - Insert Quakenet id -->
        <a href="http://webchat.quakenet.org/?channels=guardsmanbob"><img id="ov" src="../Images/List/diverse/button_ircchat.png"  /></a>
        <!-- Facebook - Insert Facebook URL --> 
        <a href="https://www.facebook.com/pages/Guardsman-Bob/316802258368275"><img id="ov" src="../Images/List/diverse/button_facebook.png" /></a>
        <!-- Twitter - Insert Twitter URL --> 
        <a href="https://twitter.com/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_twitter.png"  /></a> 
        <!-- Leaguepedia - Insert Leaguepedia URL -->
        <a href="http://leaguepedia.com/wiki/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_leaguepedia.png"  /></a>
        </p>

Answer 1

如您所知p標記的高度，並且高度將始終相同，您可以使用如下代碼：

為該段的父容器添加以下樣式：

.parent {position:relative; padding-bottom:20px; /*height of your images plus any padding for your paragraph*/}

那么您可以完全定位圖像：

 p {position:absolute; bottom:0; left:0;}

Answer 2

也許這將為您工作：

<div id="info" style="position:relative;">
    <div style="position:absolute; bottom: 50px;">
        <p>[your images]</p>
    </div>
</div>

上方的“ 50px”需要等於<p>標記中圖像的高度。

或者，如果圖像高度可變 ，則可以使用此處找到的技術： http : //www.jakpsatweb.cz/css/css-vertical-center-solution.html 。 您必須以某種方式修改頁邊距以實現所需的定位，但是所鏈接的技術會給您所需的信息。