text-align center ne fonctionne pas à l'intérieur de inline-block tableau html
Je fais un e-Mail HTML et ont décidé d'utiliser les tableaux pour chacun de la valeur liquidative des éléments. J'ai besoin de tables à être affiché en ligne. J'ai utilisé display:inline-block; sur la table de la création du résultat souhaité,
Cependant le TEXTE à l'intérieur de la table ne seront pas alignées. J'ai placé le texte-align: center; dans la table, td, et un tag, mais il n'a pas fonctionné.
Je sais que la méthode fonctionne avec les divs mais je ne peux pas trouver une solution pour les 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; }
voici la pas de code de travail
http://jsfiddle.net/nathanaric/pf35h/9/
OriginalL'auteur nathanaric | 2014-04-09
Vous devez vous connecter pour publier un commentaire.
Vous devez définir un
width
attribut sur votre table de cellules.Exemple:
OriginalL'auteur John Rooney
Ne peux pas dire que je suis d'accord avec la réponse choisie sur l'ajout de largeur.
Votre problème est le inline-block attribut. Cela affecte tous les user-agent par défaut de la table des éléments d'enfant. Simplement, remplacer display:inline-block avec float:left et vous obtiendrez les mêmes résultats qu'avec tous les autres css stlying tomber en place. (texte aligner par exemple)
}
Ici est un violon d'appliquer le nouveau style.
http://jsfiddle.net/bdTUz/
MAIS SURTOUT... Votre question, les états-vous de faire un modèle d'e-mail. Les Classes peuvent ne pas fonctionner. Ce que je sais de faire des pages html des emails, les meilleures pratiques sont à ajouter des styles en ligne.
Ce lien peut être très utile
http://htmlemailboilerplate.com/
Appréciez le lien utile
OriginalL'auteur Itumac
J'ai été en mesure de résoudre votre problème à l'aide d'une liste et ne pas utiliser toutes les DIVs. C'est beaucoup plus propre. Code de travail peut être trouvé dans ce JSFiddle:
HTML
CSS
}
OriginalL'auteur DivineChef