HTML 和 CSS：将文本行对齐到 div 的底部中心

Question

我想为我的 div 设置一个特定的布局。这些 div 包含摘要（文本大约 500 个字符长），我希望在文本之后，在我的框的底部边缘，有一行包含类似 Link to additional information : *link* 的内容。

这是一个 ascii 布局艺术，供你们理解我的意思：

---

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>

原文由 Tordah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 <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 展示了它的实际效果！

原文由 Shmoopy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以玩一下位置和利润

position:absolute;
bottom:0;
left:50%;
margin-left: -50%;

定位在左侧 50% 将从容器的垂直轴开始。左边的负边距将使内部 div 居中。

原文由 ffflabs 发布，翻译遵循 CC BY-SA 3.0 许可协议