用CSS实现图片垂直居中的方法总收集 - 阿米酷 | amiku.cn

回到日志首页

发送邮件给 i@amiku.cn

直接在网站上留个言

当前位置：阿米酷 | amiku.cn » 编程设计(实践和教程) » 文章正文

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

时间: 2009-02-01 / 分类: 编程设计(实践和教程) / 浏览次数: 人气指数：311 / 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>

Tips:You can change the code before run.

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

< !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>

Tips:You can change the code before run.

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

< !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>

Tips:You can change the code before run.

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

< !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>

Tips:You can change the code before run.

第五种：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>

Tips:You can change the code before run.

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

< !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>

Tips:You can change the code before run.

第七种

<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://amiku.cn/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://amiku.cn/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://amiku.cn/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://amiku.cn/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://amiku.cn/c/images/blank.gif" />amicool</a></li> </ul> </div> </body> </html>

Tips:You can change the code before run.

上一篇: 骆驼命名法和匈牙利命名法

下一篇: 强制不缓存页面代码(HTML+ASP+PHP篇)

标签: css, 图片垂直居中, 方法
本文链接: 用CSS实现图片垂直居中的方法总收集

发表评论

存档
- 2012 年五月 (4)
- 2012 年三月 (3)
- 2012 年二月 (2)
- 2012 年一月 (2)
- 2011 年十二月 (2)
- 2011 年十一月 (1)
- 2011 年十月 (1)
- 2011 年九月 (3)
- 2011 年八月 (3)
- 2011 年七月 (2)
- 2011 年六月 (4)
- 2011 年五月 (4)
- 2011 年四月 (4)
- 2011 年三月 (8)
- 2011 年二月 (5)
- 2011 年一月 (6)
- 2010 年十二月 (4)
- 2010 年九月 (5)
- 2010 年八月 (3)
- 2010 年七月 (4)
- 2010 年六月 (4)
- 2010 年五月 (6)
- 2010 年四月 (11)
- 2010 年三月 (12)
- 2010 年二月 (13)
- 2010 年一月 (3)
- 2009 年十二月 (2)
- 2009 年十一月 (4)
- 2009 年十月 (2)
- 2009 年九月 (1)
- 2009 年八月 (1)
- 2009 年七月 (5)
- 2009 年六月 (2)
- 2009 年五月 (2)
- 2009 年三月 (12)
- 2009 年二月 (21)
- 2009 年一月 (7)
- 2008 年十二月 (1)
- 2008 年十一月 (4)
- 2008 年九月 (7)
- 2008 年八月 (26)
- 2008 年七月 (30)
- 2008 年六月 (6)
- 2008 年五月 (9)
- 2008 年四月 (8)
- 2008 年三月 (1)
- 2008 年二月 (4)
- 2007 年十二月 (1)
- 2007 年十一月 (1)
- 2007 年九月 (1)
- 2007 年八月 (8)
- 2007 年七月 (1)
- 2007 年六月 (3)
- 2007 年五月 (1)
- 2007 年四月 (2)
- 2006 年十月 (1)
- 2006 年九月 (24)
- 2006 年八月 (4)
- 2006 年七月 (2)
- 2006 年六月 (1)
- 2006 年五月 (22)
- 2006 年四月 (6)
- 2006 年三月 (7)
- 2006 年二月 (3)
- 2006 年一月 (8)
- 2005 年十二月 (4)
- 2005 年十一月 (19)
- 2005 年十月 (29)
- 2005 年九月 (60)
- 2005 年八月 (8)
- 2005 年七月 (18)
- 2005 年六月 (3)
- 2005 年五月 (13)
- 2005 年四月 (3)
- 2005 年三月 (8)
- 2004 年十一月 (3)
- 2004 年六月 (151)
- 2004 年五月 (4)
- 2004 年四月 (1)
- 2003 年十二月 (1)
- 2003 年一月 (1)