图片不能水平居中？
时间：2010-05-11
来源：互联网
如何使未知大小图片水平居中？详情如下：
在线等.... 应该实现的效果是这样
这是原稿：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片垂直水平居中</title> <style> .picBox{width:960px;float:left;border:1px solid #ddd; padding-bottom:10px; font-size:12px;} .picDh{ font-size:14px; text-indent:30px; liNE-HEIGHT: 35px; HEIGHT: 35px;font-weight:bold; width:960px; border-bottom:1px solid #ddd; background: url(http://www.70538.cn/Images/tit960.gif) no-repeat;} .pic_list { float:left; width:960px; padding-bottom:10px; } .pic_list ul{border:0; padding:0;} .pic_list li { float:left; width:174px; height:210px; margin-top:8px; border:1px solid #e7e7e7; text-align:center;} .pic_list li img{ padding:3px; display:block; vertical-align:middle; line-height:210px; border:0;} .pic_list li a{ text-decoration:underline; color:#515151;} .pic_list li a:hover{ text-decoration:underline; color:#FF0000;} </style> <!--未知大小图片在已知大小容器水平/垂直居中--> <script language="javascript"> <!-- function int(){ obj=document.getElementsByTagName("img"); for(var i=0;i<obj.length;i++){ imgnum=obj[i]; size(imgnum); } } function size(_imgnum){ w=parseInt(_imgnum.offsetWidth); h=parseInt(_imgnum.offsetHeight); s=w/h; if(w>174){ w=174; h=184/s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } if(h>184){ h=184; w=174*s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } } //--> </script> </head> <body onLoad="int()"> <div class="picBox"> <div class="picDh">娱乐八卦</div> <div class="pic_list"><ul> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20105101778826368.jpg" alt="赵又廷突破以往形象 首度上演“赤裸诱惑”图" align="absmiddle"/>赵又廷突破以往形象 首度上</a> </li> <li> <a href="http://www.70538.cn/html/15001126756.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003516683.jpg" alt="林志玲不敢对周杰伦动心不行不会不想不能够" align="absmiddle"/>林志玲不敢对周杰伦动心不</a> </li> <li> <a href="http://www.70538.cn/html/68613541319.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003514737.jpg" alt="任达华不满“被猝死”应该有人来管管图" align="absmiddle"/>任达华不满“被猝死”应该</a> </li> <li> <a href="http://www.70538.cn/html/031721.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" alt="张榕容拍电影杀手欧阳盆栽 最怕演做作少女" align="absmiddle"/>张榕容拍电影杀手欧阳盆栽</a> </li> <li> <a href="http://www.70538.cn/html/2279016117687.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003456153.jpg" alt="王敏德担任表演嘉宾 MJ上身跳火辣桑巴舞图" align="absmiddle"/>王敏德担任表演嘉宾 MJ上身</a> </li> </ul></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
在线等.... 应该实现的效果是这样这是原稿：
<!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: 175px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px; height:200px; border: 1px solid #EEE; float:left; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> <body onload="int()"> <div class="box"> <img src="http://www.keaitu.com/pic/2010115/2010115113959.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/200801/20080122073717536.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/200801/20080122073716313.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/200801/20080122073715808.jpg" /> </div> <div class="box"> <img src="http://www.fenfun.com/bbs/attachments/month_0809/20080906_d951ebb79e3465d24aadcUkvWv3qQyMH.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/201003/20100321040134612.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/201003/20100321040114295.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/201003/20100321040118410.jpg" /> </div> <div class="box"> <img src="http://www.pcbmk.com/uploads/allimg/080906/0925353.jpg" /> </div> <div class="box"> <img src="http://www.fzlmt.com/uploadfile/201003/20100321040125371.jpg" /> </div> <script language="javascript"> <!-- function int(){ obj=document.getElementsByTagName("img"); for(var i=0;i<obj.length;i++){ imgnum=obj[i]; size(imgnum); } } function size(_imgnum){ w=parseInt(_imgnum.offsetWidth); h=parseInt(_imgnum.offsetHeight); s=w/h; if(w>200){ w=200; h=200/s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } if(h>200){ h=200; w=200*s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } } //--> </script> </body> </html>
提示：您可以先修改部分代码再运行
[ 本帖最后由 Blazers 于 2010-5-13 13:05 编辑 ] 提示：您可以先修改部分代码再运行
作者: Blazers 发布时间: 2010-05-11
.pic_list li img里面加一句“ margin:0 auto;”就可以了
作者: cwq2jxl 发布时间: 2010-05-11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>娱乐八卦</title> <style> .picBox{width:960px;float:left;border:1px solid #ddd; padding-bottom:10px; font-size:12px;} .picDh{ font-size:14px; text-indent:30px; liNE-HEIGHT: 35px; HEIGHT: 35px;font-weight:bold; width:960px; border-bottom:1px solid #ddd; background: url(http://www.70538.cn/Images/tit960.gif) no-repeat;} .pic_list { float:left; width:960px; padding-bottom:10px; } .pic_list ul{border:0; padding:0;list-style:none;} .pic_list li { float:left; width:174px; height:210px; margin-top:8px; border:1px solid #e7e7e7; text-align:center;} .pic_list li img{ padding:3px; vertical-align:middle; line-height:210px; border:0;width:123px;height:184px;} .pic_list li a{ text-decoration:underline; color:#515151;display:block;} .pic_list li a:hover{ text-decoration:underline; color:#FF0000;} </style> </script> </head> <body onLoad="int()"> <div class="picBox"> <div class="picDh">娱乐八卦</div> <div class="pic_list"><ul> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" /></a> <a href="http://www.70538.cn/html/566656.shtml" target="_blank">图片简介图片简介</a> </li> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" /></a> <a href="http://www.70538.cn/html/566656.shtml" target="_blank">图片简介图片简介</a> </li> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" /></a> <a href="http://www.70538.cn/html/566656.shtml" target="_blank">图片简介图片简介</a> </li> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" /></a> <a href="http://www.70538.cn/html/566656.shtml" target="_blank">图片简介图片简介</a> </li> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" /></a> <a href="http://www.70538.cn/html/566656.shtml" target="_blank">图片简介图片简介</a> </li> </ul></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
html代码有问题。提示：您可以先修改部分代码再运行
[ 本帖最后由 afc163 于 2010-5-11 16:38 编辑 ]
作者: afc163 发布时间: 2010-05-11
按2楼的说法操作了还是不行
3楼的同学 什么意思？
3楼的同学 什么意思？
作者: Blazers 发布时间: 2010-05-11
.pic_list ul { border:0; padding:0; list-style:none; }
添加 list-style:none;
添加 list-style:none;
作者: limingziqiang 发布时间: 2010-05-12
引用:
原帖由 limingziqiang 于 2010-5-12 10:11 发表.pic_list ul { border:0; padding:0; list-style:none; }
添加 list-style:none;
作者: Blazers 发布时间: 2010-05-13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片垂直水平居中</title> <style> .picBox{width:960px;float:left;border:1px solid #ddd; padding-bottom:10px; font-size:12px;} .picDh{ font-size:14px; text-indent:30px; liNE-HEIGHT: 35px; HEIGHT: 35px;font-weight:bold; width:960px; border-bottom:1px solid #ddd; background: url(http://www.70538.cn/Images/tit960.gif) no-repeat;} .pic_list { float:left; width:960px; padding-bottom:10px;display:block;} .pic_list ul{ list-style:none;background:blue;border:1px;width:980px;} .pic_list li { float:left; width:174px; height:210px; margin-top:8px; border:1px solid #e7e7e7; text-align:center;} .pic_list li img{ padding:3px; display:block;height:180px;border:0;background:red;} .pic_list li a{ text-decoration:underline; color:#515151;display:block;} .pic_list li a:hover{ text-decoration:underline; color:#FF0000;} </style> </head> <body> <div class="picBox"> <div class="picDh">娱乐八卦</div> <div class="pic_list"> <ul> <li><a href=""><img src="" alt="" align=""/></a><a>赵又廷突破以往形象 首度上</a></li> <li><a href="" target="_blank"><img src="" alt="" align="absmiddle"/></a><a>林志玲不敢对周杰伦动心不</a></li> <li><a href="" target="_blank"><img src="" alt="" align="absmiddle"/></a><a>任达华不满“被猝死”应该</a></li> <li><a href="" target="_blank"><img src="" alt="" align="absmiddle"/></a><a>张榕容拍电影杀手欧阳盆栽</a></li> <li><a href="" target="_blank"><img src="" alt="" align="absmiddle"/></a><a>王敏德担任表演嘉宾 MJ上身</a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: fish2009 发布时间: 2010-05-13
.pic_list ul{list-style:none}
.pic_list li img{margin:0 auto;}
.pic_list li img{margin:0 auto;}
作者: dsq580 发布时间: 2010-05-13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片垂直水平居中</title> <style> .picBox{width:960px;float:left;border:1px solid #ddd; padding-bottom:10px; font-size:12px;} .picDh{ font-size:14px; text-indent:30px; liNE-HEIGHT: 35px; HEIGHT: 35px;font-weight:bold; width:960px; border-bottom:1px solid #ddd; background: url(http://www.70538.cn/Images/tit960.gif) no-repeat;} .pic_list { float:left; width:960px; padding-bottom:10px; } .pic_list ul{border:0; padding:0;} .pic_list li { List-style:none;float:left; width:174px; height:210px; margin-top:8px; border:1px solid #e7e7e7; text-align:center;} .pic_list li img{ margin:0 auto;padding:3px; display:block; vertical-align:middle; line-height:210px; border:0;} .pic_list li a{ text-decoration:underline; color:#515151;} .pic_list li a:hover{ text-decoration:underline; color:#FF0000;} </style> <!--未知大小图片在已知大小容器水平/垂直居中--> <script language="javascript"> <!-- function int(){ obj=document.getElementsByTagName("img"); for(var i=0;i<obj.length;i++){ imgnum=obj[i]; size(imgnum); } } function size(_imgnum){ w=parseInt(_imgnum.offsetWidth); h=parseInt(_imgnum.offsetHeight); s=w/h; if(w>174){ w=174; h=184/s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } if(h>184){ h=184; w=174*s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } } //--> </script> </head> <body onLoad="int()"> <div class="picBox"> <div class="picDh">娱乐八卦</div> <div class="pic_list"><ul> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20105101778826368.jpg" alt="赵又廷突破以往形象 首度上演“赤裸诱惑”图" align="absmiddle"/>赵又廷突破以往形象 首度上</a> </li> <li> <a href="http://www.70538.cn/html/15001126756.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003516683.jpg" alt="林志玲不敢对周杰伦动心不行不会不想不能够" align="absmiddle"/>林志玲不敢对周杰伦动心不</a> </li> <li> <a href="http://www.70538.cn/html/68613541319.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003514737.jpg" alt="任达华不满“被猝死”应该有人来管管图" align="absmiddle"/>任达华不满“被猝死”应该</a> </li> <li> <a href="http://www.70538.cn/html/031721.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" alt="张榕容拍电影杀手欧阳盆栽 最怕演做作少女" align="absmiddle"/>张榕容拍电影杀手欧阳盆栽</a> </li> <li> <a href="http://www.70538.cn/html/2279016117687.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003456153.jpg" alt="王敏德担任表演嘉宾 MJ上身跳火辣桑巴舞图" align="absmiddle"/>王敏德担任表演嘉宾 MJ上身</a> </li> </ul></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: cwq2jxl 发布时间: 2010-05-13
7楼的也不对
不变形的状态下 水平居中对齐
不变形的状态下 水平居中对齐
作者: Blazers 发布时间: 2010-05-13
引用:
原帖由 dsq580 于 2010-5-13 10:12 发表.pic_list ul{list-style:none}
.pic_list li img{margin:0 auto;}
作者: Blazers 发布时间: 2010-05-13
你的意思是整体居中嘛?
在.picBox里把float:left去掉 加上 margin:0 auto
在.picBox里把float:left去掉 加上 margin:0 auto
作者: onlinewlb 发布时间: 2010-05-13
引用:
原帖由 onlinewlb 于 2010-5-13 10:59 发表你的意思是整体居中嘛?
在.picBox里把float:left去掉 加上 margin:0 auto
作者: Blazers 发布时间: 2010-05-13
margin:0 auto;适用于块级元素的居中,img{display:block;margin:0 auto;}
作者: hebin0432 发布时间: 2010-05-13
引用:
原帖由 hebin0432 于 2010-5-13 12:47 发表margin:0 auto;适用于块级元素的居中,img{display:block;margin:0 auto;}
作者: Blazers 发布时间: 2010-05-13
详细看了下 楼主应该是要求图像垂直居中吧?
应该是跟里面的JS有关..
应该是跟里面的JS有关..
作者: onlinewlb 发布时间: 2010-05-13
引用:
原帖由 onlinewlb 于 2010-5-13 12:59 发表详细看了下 楼主应该是要求图像垂直居中吧?
应该是跟里面的JS有关..
原来没有文字标题的时候一切正常
作者: Blazers 发布时间: 2010-05-13
引用:
原帖由 Blazers 于 2010-5-13 13:07 发表应该是CSS的问题
原来没有文字标题的时候一切正常
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片垂直水平居中</title> <style> .picBox{width:960px;float:left;border:1px solid #ddd; padding-bottom:10px; font-size:12px;} .picDh{ font-size:14px; text-indent:30px; liNE-HEIGHT: 35px; HEIGHT: 35px;font-weight:bold; width:960px; border-bottom:1px solid #ddd; background: url(http://www.70538.cn/Images/tit960.gif) no-repeat;} .pic_list { float:left; width:960px; padding-bottom:10px; } .pic_list ul{border:0; padding:0;} .pic_list li { float:left; width:174px; height:210px; margin-top:8px; border:1px solid #e7e7e7; text-align:center; vertical-align:middle;} .pic_list li img{ padding:3px; display:block; border:0;} .pic_list li a{ text-decoration:underline; color:#515151;} .pic_list li a:hover{ text-decoration:underline; color:#FF0000;} </style> <!--未知大小图片在已知大小容器水平/垂直居中--> <script language="javascript"> <!-- function int(){ obj=document.getElementById("pic_main").getElementsByTagName("img"); for(var i=0;i<obj.length;i++){ imgnum=obj[i]; size(imgnum); } } function size(_imgnum){ w=parseInt(_imgnum.offsetWidth); h=parseInt(_imgnum.offsetHeight); s=w/h; if(w>174){ w=174; h=184/s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } if(h>184){ h=184; w=174*s; _imgnum.style.width=w+"px"; _imgnum.style.height=h+"px"; } w=parseInt(_imgnum.offsetWidth); h=parseInt(_imgnum.offsetHeight); m = _imgnum.parentNode.parentNode.offsetHeight; m_t = parseInt((m - h)/2); _imgnum.style.marginTop = m_t - 20 + "px"; } //--> </script> </head> <body onLoad="int()"> <div class="picBox"> <div class="picDh">娱乐八卦</div> <div class="pic_list"> <ul id="pic_main"> <li> <a href="http://www.70538.cn/html/566656.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20105101778826368.jpg" alt="赵又廷突破以往形象 首度上演“赤裸诱惑”图" align="absmiddle"/>赵又廷突破以往形象 首度上</a> </li> <li> <a href="http://www.70538.cn/html/15001126756.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003516683.jpg" alt="林志玲不敢对周杰伦动心不行不会不想不能够" align="absmiddle"/>林志玲不敢对周杰伦动心不</a> </li> <li> <a href="http://www.70538.cn/html/68613541319.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003514737.jpg" alt="任达华不满“被猝死”应该有人来管管图" align="absmiddle"/>任达华不满“被猝死”应该</a> </li> <li> <a href="http://www.70538.cn/html/031721.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003501333.jpg" alt="张榕容拍电影杀手欧阳盆栽 最怕演做作少女" align="absmiddle"/>张榕容拍电影杀手欧阳盆栽</a> </li> <li> <a href="http://www.70538.cn/html/2279016117687.shtml" target="_blank"><img src="http://www.70538.cn/UploadFiles/2010-05/admin/20100510003456153.jpg" alt="王敏德担任表演嘉宾 MJ上身跳火辣桑巴舞图" align="absmiddle"/>王敏德担任表演嘉宾 MJ上身</a> </li> </ul></div> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: hebin0432 发布时间: 2010-05-13
终于解决了！谢谢了 恩人那
效果确实不怎么好 但总算比强制图片大小变形来的好看些
[ 本帖最后由 Blazers 于 2010-5-13 13:28 编辑 ]
效果确实不怎么好 但总算比强制图片大小变形来的好看些
[ 本帖最后由 Blazers 于 2010-5-13 13:28 编辑 ]
作者: Blazers 发布时间: 2010-05-13
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
