Make text center in <ul> using jquery tabs

Question

I have <ul> tag, in that I have couple of <li> items. When I added text to list item. Text is showing left side. I want make it center. I tried different ways to make it. But still showing left side.

 <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>

see above pic. It shows to left of the tab. I want make it center.

Answer 1

Does text-align not work?

li
{
    text-align:center;
}

Here's a basic fiddle.

Answer 2

if you treat the <li>'s as blocked elements, you should be able to center align. if you are floating them and they are fixed-width, something like this would work:

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

better yet, treat them as dynamically sized inline-block elements and use padding to center:

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