HTML & CSS : Align text line to bottom center of div

Question

我想为我的 div 设置一个特定的布局。这些 div 包含摘要(文本约 500 个字符长)，我希望在文本之后，在我的框的底部边缘，有一行包含类似 附加信息的链接:*link* .

这是一个 ascii layout-art 供你们理解我的意思:

---

Here is some text blablablablablablablab lablablablablablablablablablablabla gfff ff f blablablablablablablablablablablablabla blablablablablablablablablablablablabla ff f ffff blablablablablablablablablablab lablablablablablablablablablablablablablablablablab ff lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla

               Link to additional information here : *link*.

---

我希望最后一行居中。我的布局使用百分比，因此我不能使用绝对定位。如果调整窗口大小，它应该能够移动。

这是 div 的 CSS:

float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;

---

编辑: 如果忘了说明，那些 Div 是 DOM 元素(也就是每次加载页面时生成它们)并且链接位于 XML 文件中的单独标记中。因此，如果有什么我可以做的，比如:

<div class="summarydiv"> summary from xml</div><br>
<div class="centerlink">link line and link from xml</div>

Answer 1

我真的很喜欢 div，因为你永远不知道什么时候你可能想要不同的样式 block ，所以我会这样做:

<div class="parent">
   <div>Here is some text........</div>
   <div class="link"><a href="#">Link to additional information</a></div>
</div>

还有 CSS:

.parent {
    position:relative;
    float: left;
    width: 91.5%;
    min-width: 825px;
    height: 120px;
    text-align: left;
    z-index: 1;
    border:solid 1px #19365D;
    background-image:url('images/NiceBackgroundDude.png');
    background-repeat:repeat-x;
    margin-left:3.7%;
    margin-right:3.7%;
    padding-left:0.5%;
    padding-right:0.5%;
}

.link {
    position:absolute;
    width:100%;
    bottom:0;
    text-align:center;
}

最后是 jsfiddle在行动中展示它!