为什么图片不居中?奇怪了,该怎么处理

2012-02-16

为什么图片不居中????奇怪了已给了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>

热点排行