使用jquery选项卡在<ul>中使文本居中

Question

我有<ul>标签，因为我有几个<li>项目。当我向列表项添加文本时。文本显示在左侧。我想把它放在中心。我尝试了不同的方法来制作它。但仍然显示在左侧。

 <ul>
      <li > <a href="#fragment-5" >
        <asp:LinkButton ID="lnkResources" runat="server" 
 CssClass="custom-tab"  Text="Favorites" 
 OnClientClick="jQuery('#tabs').tabs('select','#fragment-5');">
 </asp:LinkButton>           
            </a>></li>
    </ul>

​

​

见上图。它显示在选项卡的左侧。我想把它放在中心。

Answer 1

如果你把<li>当做被阻塞的元素，你应该能够居中对齐。如果你浮动它们并且它们是固定宽度的，像这样的东西可以工作：

li { display: block; text-align: center; float: left; width: ...px; }

更好的做法是，将它们视为动态调整大小的内联块元素，并使用填充居中：

li { display: inline-block; padding: 5px 25px 20px; ... }

Answer 2

text-align不工作吗？

li
{
    text-align:center;
}

这是一个基本的fiddle。