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>居中对齐
<!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>
扫一扫
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
