text-align center is not working inside inline-block html table
Solution 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>
Solution 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.
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/
Related videos on Youtube
nathanaric
learned stuff as I went, learning stuff as I go along,
Updated on October 01, 2022Comments
-
nathanaric over 1 year
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