DIV内的UL元素如何居中显示-HTML教程-爱易网页

DIV内的UL元素如何居中显示

日期：2014-05-17　浏览次数：20822 次

DIV内的UL元素怎么居中显示

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=utf-8" />
<title>无标题文档</title>
<style type="text/css" >

.zhanshi_list{ width:987px; background-color:#FF0; margin:0 auto; }
.list{ line-height:20px; overflow:hidden; list-style-image:none; list-style-type:none; padding:0;}
.list li{ float:left; list-style-type:none; text-align:center; overflow:hidden; margin-right:15px; display:inline; width:180px;   }
.list li img{ margin-top:10px;  width:178px; height:270px; border:1px solid #06F; }
.list li.lastProduct{ margin:0;}
.list li a{ color:#666; font-size:12px; font-weight:normal; text-decoration:none;}
</style>
</head>

<body>
<div class="zhanshi_list">
<ul class="list">
<li><img src="maiku/imgs/BLB01607_big--w_180_h_270.jpg"/><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00 <br />￥235.00</a></li>
<li class="lastProduct"><img src="maiku/imgs/BLB01604_ad--w_180_h_270.jpg" /><br />
<a href="#">条纹防皱斜插修身休闲西裤<br />零售价:￥360.00<br />￥235.00</a></li>
</ul>
</div>
</body>
</html>

在显示的列表里面右边有很大的空白，怎么才能让左右的空白显示一样呢。就是把列表居中：

------解决方案--------------------
图挂了。。。你这个本来就居中了啊。。。
------解决方案--------------------
http://hi.csdn.net/space-9866978-do-album-picid-1011662.html
这就是我截的整个图。。。2边都一样的啊
------解决方案--------------------
你只要给ul一个宽度,稍微比li本身以及li的margin宽一点无所谓,然后用margin: 0 auto;就行了.
------解决方案--------------------
这个和浏览器也有关的有时，我上次做了个，就出现了有的居中有的不居中的状况。建议试试。
------解决方案--------------------
body:text-align:center; {在整个body上加上这样的一句代码就整个页面居中了}
------解决方案--------------------

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

DIV内的UL元素如何居中显示

相关资料更多>

推荐阅读更多>