[英]Vertically align of paragraph to the bottom of a div wont work
我有以下问题:
我有一个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&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>
如您所知p标记的高度,并且高度将始终相同,您可以使用如下代码:
为该段的父容器添加以下样式:
.parent {position:relative; padding-bottom:20px; /*height of your images plus any padding for your paragraph*/}
那么您可以完全定位图像:
p {position:absolute; bottom:0; left:0;}
也许这将为您工作:
<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 。 您必须以某种方式修改页边距以实现所需的定位,但是所链接的技术会给您所需的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.