图片垂直居中的使用技巧

2009-08-06 10:13:21

上网抄个代码,嘿嘿,感觉以后会用到! [code] .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } <div class=&#34;box&#34;> <img src=&#34;http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg&#34; /> </div>[/code] 当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下: [list][url=http://www.student.oulu.fi/~laurirai/www/css/middle/]《Vertical centering using CSS》[/url][/list] [list][url=http://www.jakpsatweb.cz/css/css-vertical-center-solution.html]《Vertical centering using CSS》[/url](标题和上同,内容不同)[/list] [list][url=http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html]《CSS List Grid Layout》[/url][/list][/list]