css中有vertical-align的定义,不幸的是IE不支持。网上的解决方法多是设置行高。
方法一 作为背景:
.bg { background:url(images/bg.gif) center center no-repeat;}
方法二 expression计算:
<div style="padding-top:expression((document.body.clientHeight-jnkc.offsetHeight)/2)"><div id="jnkc">jnkc这里是具体内容</div></div>
方法三 比较复杂:
底端对齐
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="zh-CN" >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< style type ="text/css" media ="all" > ...
div,img{...}{
margin: 0;
padding: 0;
border: 0;
}
#content{...}{
width: 303px;
height: 404px;
background: #F63;
color: #000;
font: 12px Arial,Helvetica,sans-serif;
position: relative;
}
#content div{...}{
position: absolute;
left: 0;
bottom: 0;
}
</ style >
</ head >
< body >
< div id ="content" >
< div > 底端对齐 < br />< img src ="http://bbs.51js.com/images/default/logo.gif" alt ="无忧脚本logo" title ="无忧脚本logo" /></ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="zh-CN" >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< style type ="text/css" media ="all" > ...
div,img{...}{
margin: 0;
padding: 0;
border: 0;
}
#content{...}{
width: 303px;
height: 404px;
background: #F63;
color: #000;
font: 12px Arial,Helvetica,sans-serif;
position: relative;
}
#content div{...}{
position: absolute;
left: 0;
bottom: 0;
}
</ style >
</ head >
< body >
< div id ="content" >
< div > 底端对齐 < br />< img src ="http://bbs.51js.com/images/default/logo.gif" alt ="无忧脚本logo" title ="无忧脚本logo" /></ div >
</ div >
</ body >
</ html >
居中对齐
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="zh-CN" >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< style type ="text/css" media ="all" > ...
div,img{...}{
margin: 0;
padding: 0;
border: 0;
}
#content{...}{
width: 303px;
height: 404px;
background: #F63;
color: #000;
font: 12px Arial,Helvetica,sans-serif;
position: relative;
}
#content[id]{...}{
display: table;
position: static;
}
#middle{...}{
position: absolute;
left: 0;
top: 50%;
}
#middle[id]{...}{
display: table-cell;
vertical-align: middle;
position: static;
}
#inner{...}{
position: relative;
left: 0;
top: -50%;
}
</ style >
</ head >
< body >
< div id ="content" >
< div id ="middle" >
< div id ="inner" > 垂直居中 < br />
< img src ="http://bbs.51js.com/images/default/logo.gif" alt ="无忧脚本logo" title ="无忧脚本logo" />
</ div >
</ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="zh-CN" >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< style type ="text/css" media ="all" > ...
div,img{...}{
margin: 0;
padding: 0;
border: 0;
}
#content{...}{
width: 303px;
height: 404px;
background: #F63;
color: #000;
font: 12px Arial,Helvetica,sans-serif;
position: relative;
}
#content[id]{...}{
display: table;
position: static;
}
#middle{...}{
position: absolute;
left: 0;
top: 50%;
}
#middle[id]{...}{
display: table-cell;
vertical-align: middle;
position: static;
}
#inner{...}{
position: relative;
left: 0;
top: -50%;
}
</ style >
</ head >
< body >
< div id ="content" >
< div id ="middle" >
< div id ="inner" > 垂直居中 < br />
< img src ="http://bbs.51js.com/images/default/logo.gif" alt ="无忧脚本logo" title ="无忧脚本logo" />
</ div >
</ div >
</ div >
</ body >
</ html >