网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

CSS图片垂直居中方法整理集合

【 网络作者:佚名 更新时间:2008-03-13 | 字体:
[导读]一、基本方法:<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.chinawobo.com/TR/xhtml1/DTD/xhtml1-transitional.dtd ><style type= text/css ><!-- * {margin:0;padding:0}div...

一、基本方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.chinawobo.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
   width:500px;
   height:500px;
   border:1px solid #ccc;
   overflow:hidden;
   position:relative;
   display:table-cell;
   text-align:center;
   vertical-align:middle
   }
div p {
   position:static;
   +position:absolute;
   top:50%
   }
img {
   position:static;
   +position:relative;
   top:-50%;left:-50%;
   width:276px;
   height:110px
   }

-->
</style>

<div><p><img src="

二、标准浏览器下另类方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.chinawobo.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
    margin:0;padding:0
    }
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    margin:auto
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }
p:after {
    content:".";font-size:1px;
    visibility:hidden
    }
-->
</style>

<div><p><img src="<A href='http://www.chinawobo.com/uploadfiles/2008/03131204580.gif"/></p></div>


三、标准浏览器严格型申明下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.chinawobo.com/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    }
div p {
    position:static;
    +position:absolute;
    top:50%;
    vertical-align:middle
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }

-->
</style>

<div><p><img src="


四、利用字体大小的方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.chinawobo.com/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
* {margin:0;padding:0;}
div {
    width:500px;text-align:center;border:1px solid #f00;line-height:500px;
    height:500px;font-size:500px
    }
*>div{
    font-size:12px
    }
div img {
    vertical-align:middle
    }
</style>

<div>
<img src="</div>

五、最简单当然是背景图片的方法啦
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.chinawobo.com/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">
* {margin:0;padding:0;}
div {
    width:500px;border:1px solid #f00;
    height:500px;
    background:url("    }
</style>

<div>
</div>

  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
RSS订阅
  • QQ邮箱
  • 填写您的邮件地址,订阅我们的精彩内容:
更多
© 2017 网站运营 - T086.com(原itlearner.com)
微商货源 | 冠珠陶瓷 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 |
RunTime:8.63ms QueryTime:7