HTML 和 CSS：将文本行与 div 的底部中心对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24207648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML & CSS: Align text line to bottom center of div
提问by Tordah
I would like to set a specific layout for my divs. These divs contain summaries (texts about 500 chars long) and I would like that after the text, on the bottom edge of my boxes, to have a line containing something like Link to additional information : *link*.
我想为我的 div 设置一个特定的布局。这些 div 包含摘要（文本大约 500 个字符长），我希望在文本之后，在我的框的底部边缘，有一行包含类似Link to additional information : *link*.
Here's an ascii layout-art for you guys to understand what I mean:
这是一个 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
下面是一些文本blablablablablablablab lablablablablablablablablablablabla GFFF FF˚Fblablablablablablablablablablablablabla blablablablablablablablablablablablabla FF˚FFFFF blablablablablablablablablablab lablablablablablablablablablablablablablablablablab FF lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla
Link to additional information here : *link*.
I want the last line to be centered. My layout uses percentage, therefore I cannot use absolute positioning. It should be able to move if the window gets resized.
我希望最后一行居中。我的布局使用百分比，因此我不能使用绝对定位。如果窗口调整大小，它应该能够移动。
Here is the CSS of the div:
这是 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%;
EDIT:If forgot to tell, those Divs are DOM elements (aka they are generated everytime the page is loaded) and the link is in a separate tag in the XML file. therefore, if there is something I could do like:
编辑：如果忘了说，那些 Div 是 DOM 元素（也就是每次加载页面时都会生成它们），并且链接位于 XML 文件中的单独标记中。因此，如果有什么我可以做的：
<div class="summarydiv"> summary from xml</div><br>
<div class="centerlink">link line and link from xml</div>回答by Shmoopy
I really like divs because you never know when you may want to style blocks differently, so this is how I would do it:
我真的很喜欢 div，因为你永远不知道什么时候你可能想要不同的样式块，所以我会这样做：
<div class="parent">
<div>Here is some text........</div>
<div class="link"><a href="#">Link to additional information</a></div>
</div>
And the CSS:
和 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;
}
and finally a jsfiddleshowing it in action!
最后一个jsfiddle展示了它的实际效果！
回答by ffflabs
You could play a bit with position and margins
你可以玩一下位置和边距
position:absolute;
bottom:0;
left:50%;
margin-left: -50%;
positioning at left 50% will start from the vertical axis of your container. Negative margin to the left will center the inner div.
位于左侧 50% 的位置将从容器的垂直轴开始。左边的负边距将使内部 div 居中。
回答by sailens
Insert the last line into an <span>element, set the element style to
将最后一行插入到一个<span>元素中，将元素样式设置为
width: auto;
text-align: center;
that should do the job
那应该做的工作
回答by CharlesF
You can also put htat last line in its own div & set the bottom margin to zero with an !important.
您还可以将 htat 最后一行放在自己的 div 中，并使用 !important 将底部边距设置为零。
回答by Penny Liu
flex-growworked for me. Here's how I did:
flex-grow为我工作。这是我的做法：
.container {
display: flex;
flex-direction: column;
width: 91.5%;
min-width: 825px;
height: 120px;
border: solid 1px #19365D;
}
.item {
width: auto;
/* Grow to fill available space */
flex-grow: 1;
}
.summary {
flex-grow: 2;
}
.link {
display: flex;
align-self: center;
/* Make the flexbox items aligned vertically at the bottom */
align-items: flex-end;
}<div class="container">
<div class="item summary">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibu
</div>
<div class="item link">
<a href="#">Link to additional information</a>
</div>
</div>