带有图像和文本的 HTML 标题 - 将文本与底部对齐？

Question

我正在用 CSS 编写一个 HTML 页面。在我的页面顶部，我想显示一个带有图像和文本的标题(文本左侧的图像)。图片大小为 64 x 64 像素，我希望文本较大。

除了我想在底部对齐文本之外，我几乎可以做任何事情，但无论我做什么，我似乎都无法让文本停止将自己置于顶部。

这是我的标题的 HTML:

<div id="container" class="container">
    <div class="header">
        <div class="header image"></div>
        <div class="header text">Header Text</div>
    </div>
</div>

这是 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;
}

在搜索如何执行此操作后，我已经阅读了几个网页。我发现一页看起来很简单。他们说您必须对 display 属性使用 inline-block 才能实现 vertical-align。

我将我的 CSS 更改为您在上面看到的内容，但仍然无效。这是我的标题的样子:

(注意边框颜色只是为了可视化正在发生的事情。)

任何人都可以告诉我我做错了什么以及如何解决它以便我的文本在底部垂直对齐吗？

谢谢。

Answer 1

没错，将元素设置为内联 block 并使用垂直对齐。但是，这意味着不要 float 元素! float 元素是 float 的，您否定了 display: inline-block 声明:http://jsfiddle.net/qQtG9/2/ (我已经清理了你的代码)。

HTML:

<div class="header">
    <div class="image"></div><div class="text">Header Text</div>
</div>

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;
}