用CSS实现图片垂直居中的方法总收集

当前位置：阿米酷 » 编程设计(WEB互联网日志) » 文章正文

用CSS实现图片垂直居中的方法总收集

时间: 2009-02-01 / 分类: 编程设计(WEB互联网日志) / 浏览次数: 人气：156 / 0个评论发表评论

用CSS直接来实现图片的垂直居中似乎有点难度，但是好似又有很多种方法可以实现，参照来源Blueidea，收集如下：
第一种

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css">  </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

提示：你可以先修改部分代码再运行。

第二种：标准浏览器下另类方法

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css">  </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>

提示：你可以先修改部分代码再运行。

第三种：标准浏览器严格型申明下

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css">  </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

提示：你可以先修改部分代码再运行。

第四种：利用字体大小的方法

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/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="http://www.google.com/intl/en/images/logo.gif" /> </div>

提示：你可以先修改部分代码再运行。

第五种：display:inline-block 方法

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> div { display:table-cell; height:300px; width:500px; text-align:center; border:1px solid #000; vertical-align:middle } </style>  <div> <i></i> <img src="http://www.baidu.com/img/logo.gif" alt=""/> </div>

提示：你可以先修改部分代码再运行。

第六种：最简单当然是背景图片的方法拉

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/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("http://www.google.com/intl/en/images/logo.gif") center no-repeat } </style> <div> </div>

提示：你可以先修改部分代码再运行。

第七种

<html> <head> <style type="text/css">  </style> </head> <body> <div id="rightcol"> <ul id="picturelist"> <li><a href="#"><img style="background:url(http://www.google.com/intl/en/images/logo.gif) no-repeat center center;" src="http://www.amicool.net/c/images/blank.gif" />amicool</a></li> <li><a href="#"><img style="background:url(http://www.google.com/intl/en/images/logo.gif) no-repeat center center;" src="http://www.amicool.net/c/images/blank.gif" />amicool</a></li> <li><a href="#"><img style="background:url(http://www.google.com/intl/en/images/logo.gif) no-repeat center center;" src="http://www.amicool.net/c/images/blank.gif" />amicool</a></li> <li><a href="#"><img style="background:url(http://www.google.com/intl/en/images/logo.gif) no-repeat center center;" src="http://www.amicool.net/c/images/blank.gif" />amicool</a></li> <li><a href="#"><img style="background:url(http://bbs.blueidea.com/images/blue/newtopic.gif) no-repeat center center;" src="http://www.amicool.net/c/images/blank.gif" />amicool</a></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

阿米酷 – WEB编程和WEB设计经验技巧生活影集、电影感想和日常摄影的收藏记录