css ul li 居中问题，li left之后还是实现居中

代码如下，像是这种，如何让多个li float之后，还是居中？我给ul加了宽度之后，只是ul居中，UL里面的li还是float：left排列，怎么实现ul里面的li居中？图片说明

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul{
    list-style:none;
    margin:0 auto;
    text-align:center;
    background-color:#90F8B5}

    li{
        width:72px;
        height:38px;
        background-color:#999;
        margin:15px;
        float:left;}
</style>
</head>

<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
ul{ width: 408px; list-style:none; margin:0 auto; text-align:center; background-color:#90F8B5; overflow:hidden; padding: 0 25px; } li{ width:72px; height:38px; line-height: 38px; background-color:#999; margin:15px; float:left; }

宽度是算出来的。width= 72*4+30*4

加上这个
li{
line-height: 38px;
}

li{
display:block;
width:100%;
margin:0 auto;
}
试试看

li水平居中你只能控制ul的宽度，居中ul

ul{
list-style:none;
margin:0 auto;
text-align:center;
width:72px;
background-color:#90F8B5}
限定ul 宽度，不知道是不是你要的效果