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

Posted 2023-03-05

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

【英文标题】：HTML Header With Image And Text - Align Text To Bottom?

【发布时间】：2014-09-11 12:13:52

【问题描述】：

我正在用 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 更改为您在上面看到的内容，但仍然无法正常工作。这是我的标题的样子：

（请注意，边框颜色仅用于可视化正在发生的事情。）

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

谢谢。

【参考方案1】：

你也可以尝试给#header一个位置：相对 然后给 .text 绝对位置，所以如果你给 bottom:0;它将被堆栈到#header div的底部

【参考方案2】：

没错，将元素设置为内联块并使用垂直对齐。但是，这意味着不要浮动元素！浮动元素是浮动元素，你否定 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;

【讨论】：

我浮动元素的原因是因为我希望它们并排，我认为这是唯一的方法。 :O

只需将它们并排放在标记中：jsfiddle.net/qQtG9/2。当您在换行符上显示它们时，您使用回车符，浏览器将其视为空格。

什么意思？在 html 中，将它们并排放置意味着不要嵌套它们？

好的，谢谢！ :) 我以前从未使用过小提琴，这很酷！

更好的是，请查看更新后的代码以获得我的答案。标题中的 div 在 HTML 中彼此相邻堆叠。