Html CSS 文本对齐容器底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8403882/
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
CSS Text Align Bottom of Container
提问by djt
I have a header which has a large image floated on one side, and a small paragraph of text on the other side. I want the paragraph to start at the bottom of the header div. If there were 5 lines in the paragraph, I want the last line to be at the bottom of the header. I'm having trouble getting the paragraph to align itself down there.
我有一个标题，它的一侧漂浮着一个大图像，另一侧漂浮着一小段文字。我希望段落从标题 div 的底部开始。如果段落中有 5 行，我希望最后一行位于标题的底部。我无法让段落在那里对齐。
I have something like this:
我有这样的事情：
<div id='header'>
<img id='logo' />
<p id='quote'></p>
</div>
And the CSS is:
CSS是：
div#header {
height: 200px;
}
div#header img#logo {
float: left;
}
p#quote {
float: left;
}
回答by Dan Heberden
http://jsfiddle.net/danheberden/ymwPe/
http://jsfiddle.net/danheberden/ymwPe/
<div id="container">
<div id="gonnaBeOnTheBottom">
<p>Hi there!</p>
<p>I'm on the bottom!</p>
</div>
</div>
css:
css：
#container {
background: #EEE;
height:400px;
width:400px;
position:relative;
}
#gonnaBeOnTheBottom {
position:absolute;
bottom:0;
}
by setting position:relativeon the parent container, you can absolute position elements inside of it :)
通过position:relative在父容器上设置，您可以绝对定位其中的元素:)
回答by Creaforge
A more modern approach would be the usage of flexbox, that vastly eases the responsive work afterwards.
一种更现代的方法是使用flexbox，它极大地简化了之后的响应工作。
As flexbox free space distribution is managed with auto margins, you simply have to do the following :
由于 flexbox 可用空间分配是通过自动边距管理的，您只需执行以下操作：
- Set the parent to a flex display
- Tell that you want the parent to distribute its children in a column layout (top to bottom)
- Apply a
margin-top: auto;to the element that you want to stick at the bottom, flex will apply all the free space above
- 将父级设置为弹性显示
- 告诉您希望父级将其子级分布在列布局中（从上到下）
- 将 a
margin-top: auto;应用于要粘贴在底部的元素，flex 将应用上面的所有可用空间
#container {
background: #eaeaea;
height:180px;
display: flex;
flex-direction: column;
}
#bottom {
border: 1px solid blue;
margin-top: auto;
}<div id="container">
<p>Container content</p>
<div id="bottom">
This flex content will stay at the bottom!
</div>
</div>回答by Jason Lydon
I recently came across a vertically center trick that I was able to adjust to server this purpose: http://codepen.io/Bushwazi/pen/VYBBmL
我最近遇到了一个垂直居中的技巧，我能够为此目的调整服务器：http: //codepen.io/Bushwazi/pen/VYBBmL
parent {
height: 200px;
}
child {
position: relative;
top: 100%;
transform: translateY(-100%);
display block
}
** Need to point out that browser needs to support CSS3 transform: http://caniuse.com/#search=transforms
** 需要指出浏览器需要支持CSS3 transform：http: //caniuse.com/#search=transforms
回答by Sarin J S
I made some changes in your code. Try this
我对您的代码进行了一些更改。尝试这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
div#header {
height:200px;
}
div#header img#logo {
float:left;
}
.header p {
float:left
}
</style>
</head>
<body>
<div id='header'>
<img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" />
<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
</div>
</body>
</html>
