html图片怎么放在页眉的中心,CSS/HTML-在页眉中组合文本和图像的正确方法

我倾向于用一种稍微不那么纯粹的方法来解决这个问题。

我将图像嵌套在h1中,以给出以下标记:

This is the header

然后使用CSS定位

相对的,图像

position:absolute

. 这将导致图像从文档流中取出并移动到其父元素文本的“上方”。我使用的CSS是(类似于):

#header h1

{position: relative;

border: 0 none transparent;

font-size: 2em;

margin: 1em auto;

border: 1px solid #ccc;

}

#header img

{position: absolute;

top: 0;

left: 0;

}

第一部分显示了第一步,将图像相对于其父图像进行定位,该图像具有透明背景,以便了解正在发生的事情。

在第二和第三部分中,我使用jQuery将

尺寸等于图像的尺寸,以防止(如第一个版本中的)

超出图像本身的文本,如下所示:

$(window).load(

function() {

var w = $('#logo').outerWidth();

var h = $('#logo').outerHeight() ;

$('#two h1').css('width',w,'height',h);

$('#three h1').css('width',w,'height',h);

}

);

它有点笨拙,显然依赖于javascript的启用和

也

当文档运行脚本并应用math/css时,页面加载时会有一点页面闪烁。

该方法确实满足了在加载图像之前让文本可见的要求,并且它确实使用xhtml和CSS隐藏文本。如果事先知道图像的尺寸

要求

防止溢出的jQuery/js。

(我向杰夫、乔尔等人表示歉意,因为他们未经任何许可使用了SO标志,但当时觉得很合适。。。=) )