HTML标头与图像和文本

HTML标头与图像和文本

本文介绍了HTML标头与图像和文本 - 对齐文本到底部?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用CSS编写HTML网页。在我的页面顶部,我想显示一个带有图像和文本的标题(图像在文本的左边)。图片大小为64 x 64像素,我想要的文字很大。

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.

我几乎可以做任何事情,除了我想对齐底部的文字,但

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.

这是我的标题的HTML:

Here is the HTML for my header:

<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 作为显示属性,才能使 vertical-align 成功。

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-block for the display property in order for vertical-align to be honored.

我改变了我的CSS到你上面看到的,但仍然没有工作。这是我的标头看起来像:

I changed my CSS to what you see above but that still did not work. Here is what my header looks like:

(注意,边框颜色只是用来显示发生的情况。)

(Note the border coloring is just for visualizing what's going on.)

任何人都可以告诉我

谢谢。

推荐答案

这是正确的,将元素设置为内联块和使用vertical-align。但是,这意味着不浮动元素!浮动元素是浮动,并且取消 display:inline-block 声明:(我已清除您的代码一些)。

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-block declaration: http://jsfiddle.net/qQtG9/2/ (I've cleaned your code some).

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

这篇关于HTML标头与图像和文本 - 对齐文本到底部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 07:50