当前位置：首页 → 问答吧 → 图片垂直居中问题

图片垂直居中问题

时间：2010-08-31

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" > <head> <title>未知大小图片在已知大小容器水平/垂直居中</title> <style type="text/css"> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 120px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:120px; height:140px; border: 1px solid #EEE; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> <body> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div> </body> </html>
提示：您可以先修改部分代码再运行

对于小图片可以有垂直居中的效果，但对于大过尺寸的时候，就撑大了原来的尺寸，加上overflow:hidden都没有用

作者: rainbowbin 发布时间: 2010-08-31

你给.box img 限定一个高宽值不就不会被撑开了

作者: gollum 发布时间: 2010-09-02

不会吧，放个大图，看看效果

作者: furuier 发布时间: 2010-09-02

我用360浏览器看，怎么看你的图在左边啊，也不居中

作者: furuier 发布时间: 2010-09-02

要是小图，那给.box img加的高宽值，就会拉大

作者: rainbowbin 发布时间: 2010-09-02