请教CSS样式，居中的问题。_html/css_WEB-ITnose

<style>#cx{ width:90%; height:40px; margin:10px auto 10px auto;text-align:center;}#cx ul li{ width:45%; height:40px; float:left; list-style-type:none;}.cx{ width:80%; height:40px; margin:0px;auto; line-height:40px; color:#fff; background-color:#ABABAB; border-radius:4px; text-align:center; font-size:14px;}.cx a{ color:#fff;text-decoration:none;}.cx a:visited{ color:#fff;text-decoration:none;}.cx a:active{ color:#fff;text-decoration:none;}.cx a:hover{ color:#fff;text-decoration:none;}</style>

<div id="cx"><ul><li><div class="cx"><a href="javascript:void(0)">刷新</a></div></li><li><div class="cx"><a href="javascript:void(0)">退出</a></div></li></ul></div>

两个按钮无法居中，请高手赐教。

回复讨论(解决方案)

ie8和firefox是居中的啊，你的什么浏览器啊

ie8,360,shouji都不行啊。

？????????

<style>#cx{ width:90%; height:40px; margin:10px auto 10px auto;text-align:center;}#cx ul li{ width:45%; height:40px; float:left; list-style-type:none;}.cx{ width:80%; height:40px; margin:0px;auto; line-height:40px; color:#fff; background-color:#ABABAB; border-radius:4px; text-align:center; font-size:14px;}.cx a{ color:#fff;text-decoration:none;}.cx a:visited{ color:#fff;text-decoration:none;}.cx a:active{ color:#fff;text-decoration:none;}.cx a:hover{ color:#fff;text-decoration:none;}</style><div id="cx"><ul><li><div class="cx"><a href="javascript:void(0)">刷新</a></div></li><li><div class="cx"><a href="javascript:void(0)">退出</a></div></li></ul></div> 

测试结果是这样的

你测试的是什么结果？

测试结果差不多，右边明显比左边宽啊

完全居中
你需要加

#cx{width:100%;
.cx{ display:inline-block;

<div id="cx"><ul><li><div class="cx"><a href="javascript:void(0)">刷新</a></div></li><li><div class="cx"><a href="javascript:void(0)">退出</a></div></li></ul></div>