为什么图片不居中????奇怪了已给了text-align:center但没效果HTML code!DOCTYPE html PUBLIC -//W3C//D
为什么图片不居中????奇怪了
已给了text-align:center;但没效果
- HTML code
<!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" /><style type="text/css"> *{margin:0;padding:0;} ul{ width:500px; height:101px; border:1px solid orange; list-style:none outside none; margin:55px auto; } ul li{ float:left; width:200px; margin-right:25px; height:100px; text-align:center; } ul li img{ float:left; border:none; } ul li .list{ width:200px; text-align:center; height:100px; }</style></head><body> <ul> <li> <div class="list"> <table width="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="200" valign="middle" height="100" align="center"> <a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a> </td> </tr> </table> </div> </li> <li> <div class="list"> <table width="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="200" valign="middle" height="100" align="center"> <a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a> </td> </tr> </table> </div> </li> <li> <div class="list"> <table width="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="200" valign="middle" height="100" align="center"> <a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a> </td> </tr> </table> </div> </li> </ul></body></html>[解决办法]
- CSS code
ul li img{ float:left; border:none; }
[解决办法]
楼上说的可以解决问题
不过代码你用了li来显示图片了，怎么里面还又加div又加table的，直接在li里面加图就可以了，代码还比较简化
- HTML code
<!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" /><style type="text/css"> *{margin:0;padding:0;} ul{ width:500px; height:101px; border:1px solid orange; list-style:none outside none; margin:55px auto; } ul li{float:left; width:200px; margin-right:25px; height:100px; text-align:center; } img{border:none;} </style></head><body> <ul> <li><a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a></li> <li><a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a></li> <li><a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a></li> <li><a href=""><img src="http://vpic4.sinaimg.com.cn/df/73/1761139.gif" /></a></li> </ul></body></html>