带有图像和文本的 HTML 标题 - 将文本对齐到底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24857495/
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 Header With Image And Text - Align Text To Bottom?
提问by Jan Tacci
I am writing an HTML page with CSS. At the top of my page I want to show a header with an image and text (image to the left of the text). The image size is 64 x 64 pixels and I want the text to be large.
我正在用 CSS 编写一个 HTML 页面。在我的页面顶部，我想显示一个带有图像和文本的标题（文本左侧的图像）。图像大小为 64 x 64 像素，我希望文本变大。
I was able to do almost everything except I want to align the text at the bottom but, no matter what I do, I can't seem to get the text to stop placing itself at the top.
除了我想在底部对齐文本之外，我几乎可以做所有事情，但是，无论我做什么，我似乎都无法让文本停止将自己放置在顶部。
Here is the HTML for my header:
这是我的标题的 HTML：
<div id="container" class="container">
<div class="header">
<div class="header image"></div>
<div class="header text">Header Text</div>
</div>
</div>
and here is the CSS;
这是 CSS；
.container .header {
height: 65px;
border:2px solid red;
}
.container .header .image {
background: url("../images/icon64.png") no-repeat;
float: left;
display: inline-block;
width: 65px;
border:2px solid green;
}
.container .header .text {
float: left;
display: inline-block;
vertical-align: bottom;
font-family: sans-serif;
font-size: x-large;
border:2px solid blue;
}
I have been reading several web pages after searching for how to do this. I found one page that seemed pretty straight forward. They said you have to use inline-blockfor the displayproperty in order for vertical-alignto be honored.
在搜索如何执行此操作后，我一直在阅读几个网页。我找到了一个看起来很简单的页面。他们说，你必须使用inline-block的对显示属性，以便垂直对齐的兑现。
I changed my CSS to what you see above but that still did not work. Here is what my header looks like:
我将我的 CSS 更改为您在上面看到的内容，但仍然无效。这是我的标题的样子：
(Note the border coloring is just for visualizing what's going on.)
（请注意，边框着色仅用于可视化正在发生的事情。）
Can anyone tell me what I am doing wrong and how to fix it so that my text is vertically aligned at the bottom?
谁能告诉我我做错了什么以及如何修复它以便我的文本在底部垂直对齐？
Thank you.
谢谢你。
回答by DRD
That is correct, set elements as inline-blocks and use vertical-align. However, that means not to float the elements! Floated elements are floats and you negate the display: inline-blockdeclaration: http://jsfiddle.net/qQtG9/2/(I've cleaned your code some).
这是正确的，将元素设置为内联块并使用垂直对齐。但是，这意味着不要浮动元素！浮动元素是浮动，你否定display: inline-block声明：http: //jsfiddle.net/qQtG9/2/（我已经清理了你的代码）。
HTML:
HTML：
<div class="header">
<div class="image"></div><div class="text">Header Text</div>
</div>
CSS:
CSS：
.header {
border:2px solid red;
}
.header .image {
background: url("http://placehold.it/64x64")
no-repeat;
width: 65px;
height: 65px;
border:2px solid green;
}
.header .text {
font: x-large sans-serif;
border:2px solid blue;
}
.header .image,
.header .text {
display: inline-block;
vertical-align: bottom;
}
回答by user3855157
You can also try giving the #header a position:relative and then give the .text position absolute, so if you give bottom:0; it will be stack to the bottom of the #header div
你也可以尝试给 #header 一个 position:relative 然后给 .text 位置绝对，所以如果你给 bottom:0; 它将堆叠到#header div 的底部
