如何用CSS写网页的head,要图片居中，文字写在图片的左下方。

html-css011

如何用CSS写网页的head,要图片居中，文字写在图片的左下方。,第1张

垂直居中问题

css

-----------------------------

虽然css有一个垂直居中属性，CSS垂直居中属性不能决绝如下问题:

存在的问题：

*

已知div高度

*

div动态内容，不确定高度

*

想要内容垂直居中

*

不用table

在IE下:

位于相对容器的一半高度.

div内容所占有的高度默认设置为div高度

在标准浏览器中如：Mozilla,

Opera,

Safari

等等是完全不同的.

div被当做一个table

被现实出来.

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01//EN">

<html>

<head>

<title>Universal

vertical

center

with

CSS</title>

<style>

.greenBorder

{border:

1px

solid

green}

</style>

</head>

<body>

<div

class="greenBorder"

style="display:

table

height:

400px

#position:

relative

overflow:

hidden">

<div

style="

#position:

absolute

#top:

50%display:

table-cell

vertical-align:

middle">

<div

class="greenBorder"

style="

#position:

relative

#top:

-50%">

any

text<br>

any

height<br>

any

content,

for

example

generated

from

DB<br>

everything

is

vertically

centered

</div>

</div>

</div>

</body>

</html>

在浏览器中显示：

any

text

any

height

any

content,

for

example

generated

from

DB

everything

is

vertically

centered

css没有headbg，，，上面的headbg是自定的类名

你id为default的元素下调用的时候class="head"就是调用#default .head。。class=headbg就是#default .headbg的样式。。

这两个有什么不同嘛，.headbg是Y平铺，.head是X平铺，，，X是横向，Y是纵向。多了高度，多了一个，定位。