带有图像和文本的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;
}

在搜索了如何执行此操作后,我一直在阅读几个网页.我找到了一个看起来非常简单的页面.他们说你必须使用inline-block作为display属性才能使vertical-align得到尊重.

我将我的CSS更改为您在上面看到的内容,但仍然无法正常工作.这是我的标题的样子:

(注意边框着色仅用于可视化正在发生的事情.)

谁能告诉我我做错了什么以及如何修复它以便我的文本在底部垂直对齐？

谢谢.

Answer 1

这是正确的,将元素设置为内联块并使用vertical-align.但是,这意味着不要浮动元素!浮动元素是浮点数,你否定了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;
}