Html CSS：文本不会居中吗？

有人能看出我在这方面出了什么问题吗？我正在尝试使用CSS将文本置于导航按钮的中心

#nav {
margin:20px 0 0 0;

}

#nav ul {
margin:0;
}

#nav li:first-child {
width:80px;
height:30px;
display:inline-block;
background-color:#8f00ae;
text-align:center;
 }   
#nav ul li a {  
}

这是我的html

    <!-- Navigation Section -->
        <div class="cl" id="nav">
            <div class="menu-top_nav-container">
<ul id="menu-top_nav" class="menu">
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13">
<a href="http://localhost:8888/?cat=3">Features</a>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category   menu-item-18">
<a href="http://localhost:8888/?cat=4">Noize Live</a>
</li>
</ul>
</div>
</div>

可能是因为导航正在浮动。。因此，它不响应文本对齐：居中；如果无法访问整个html和css页面，这将非常困难，但请尝试以下操作：

#nav li:first-child a 
{
padding: 0 20px;
}

---

浮动不影响文本对齐：居中；谢谢这就是问题所在。在样式表的下面，它是浮动的。它被设置为内联块，并且有一个定义的宽度。浮动不会强制图元塌陷。如果在其上添加左侧和右侧填充“修复”了居中，那是因为宽度不够宽，无法提供居中文本的感觉。我没有添加任何填充移除浮动确实解决了问题。