Je rencontre un problème pour aligner le texte et le lien d'une image l'un à côté de l'autre dans une ligne de tableau. L'image continue de dériver de haut en bas. J'ai essayé différents styles d'alignement du milieu et de bloc d'affichage sans succès. Je suis limité à avoir uniquement CSS en ligne et à essayer de s'afficher correctement sur différents appareils et clients de messagerie de bureau. Le code affiché est une table imbriquée dont je ne peux pas faire aligner les éléments les uns sur les autres. L'affichage du code dans le navigateur, pour la plupart, s'affiche correctement. Mais une fois que le code est dans Outlook et dans d'autres programmes, l'image dérive dans la ligne.
<table cellspacing="0" cellpadding="0"> <td height="100%" align="left"> <a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a> </td> <td height="100%" align="left"> <a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com | </a> </td> <td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;"> <a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11"></a> </td> </table>
3 Réponses :
écrire du HTML pour un e-mail est comme un retour aux 90ies !
si vous enveloppez tout votre exécutez simplement l'extrait de code : dans un tabelrow et que vous définissez sa valeur en bas,
<table cellspacing="0" cellpadding="0">
<tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
<td height="100%" align="left">
<a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
</td>
<td height="100%" align="left">
<a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com | </a>
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11"></a>
</td>
</tr>
</table>
J'utiliserais valign = "bottom" pour tous les td s, et en plus j'ajouterais du padding-bottom au balise img pour corriger le léger décalage vertical entre le texte et l'image (en fait, seulement 1px dans cet exemple particulier):
<table cellspacing="0" cellpadding="0"> <td height="100%" align="left" valign="bottom"> <a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a> </td> <td height="100%" align="left" valign="bottom"> <a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com | </a> </td> <td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom"> <a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11"></a> </td> </table>
C'est très simple et une fois testé avec Litmus, il donne des résultats cohérents sur tous les clients de messagerie. J'ai défini la taille de la police, la hauteur de la ligne et la taille de l'image sur 13 px. Comme ils étaient tous égaux, il était plus facile de s'aligner. Je n'ai pas mis d'alignement sur la table car il devrait par défaut être aligné au milieu. Sur l'image que j'ai placée Avec Gmail, Apple, IOS, Android et d'autres clients de messagerie, tout reste cohérent. Avec Outlook, il se décale d'environ un pixel. J'ai également ajouté Bonne chance. vertical-align: -2px; Outlook prend en charge les bogues lorsqu'il s'agit d'utiliser des valeurs telles que middle , mais pas avec des valeurs numériques. dans la feuille de style et ajout de display: inline-block; . J'ai tout placé dans un seul . text-decoration: none; aux hrefs pour nettoyer un peu le look. <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
<tr>
<td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
<a href="tel:5555555555" style="font-size: 13px; text-decoration: none;">555-555-5555</a> |
<a href="https://stackoverflow.com" style="font-size: 13px; text-decoration: none;">stackoverflow.com</a> |
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13"></a>
</td>
</tr>
</table>
Montrez-nous un exemple de code et des captures d'écran a) du résultat attendu et b) de la mauvaise apparence actuelle.
Ajout d'un exemple de code et d'une capture d'écran.
Je ne sais pas si cette capture d'écran correspond à ce que vous voulez ou à ce que vous ne voulez pas . Ce serait bien si vous pouviez montrer les deux. Vous pouvez essayer de définir
valignsur les cellules du tableau ouvertical-alignen CSS, peut-être, ou de diviser la cellule du tableau en deux.La capture d'écran n'est pas ce que je voudrais afficher.