text-align center is not working inside inline-block html table

Question

I am making an HTML Email and have decided to use tables for each of the nav elements. I need the tables to be displayed inline. I used display:inline-block; on the table creating the desired result, However the TEXT inside the table will not align. I have placed the text-align: center; in the table, td, and a tag but it has not worked.

I know the method works with divs but I can't find a solution for tables.

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="right" valign="top">

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
            <tr>
                <td align="center"> <a href="#" style="text-decoration: none; color: #005E82;">
     option 1
     </a>

                </td>
            </tr>
        </table>

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center" style="text-align:center;"> <a href="#" style="text-decoration: none; color: #005E82;">
     option 2
                    </a>

                </td>
            </tr>
        </table>

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center"> <a href="#" style="text-decoration: none; color: #005E82; text-align:center;">
     option 3
     </a>

                </td>
            </tr>
        </table>
    </td>
</tr>

CSS

.navInline {
display:inline-block;
vertical-align:top;
text-align: center !important; }

here is the not working code

http://jsfiddle.net/nathanaric/pf35h/9/

Answer 1

You need to set a width attribute on your table cells.

Example:

<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
  <tr>
    <td align="center" width="130"><a href="#" style="text-decoration: none; color: #005E82;">option 1</a></td>
  </tr>

Answer 2

Can't say I agree with the chosen answer about adding width. Your issue is the inline-block attribute. It's affecting all the user-agent defaults of the table child elements. Simply, replace display:inline-block with float:left and you get the same results with all the other css stlying falling into place. (text align e.g.)

.navInline {
float:left;
vertical-align:top;
text-align: center !important;

}

Here is a fiddle applying the new style.

http://jsfiddle.net/bdTUz/

BUT IMPORTANTLY... Your question states you are making an email template. Classes may not work. What I know from making html based emails, best practices are to add inline styles.

This link may be very helpful http://htmlemailboilerplate.com/

Answer 3

I was able to resolve your issue using a list and not using any DIVs. It's much cleaner. Working code can be found in this JSFiddle:

HTML

  <ul class="navInline">
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  </ul>

CSS

    .navInline li {
    display:inline-block;
    list-style:none;
    border: 1px solid #333;
    padding: 5px;
    background-color: yellow;   

}