18041 sujets

Questions générales et questions de débutants

[Résolu] Centrer 2 images help !

Bonjour,

Je suis 100% débutante et j'essaie de centrer 2 images dans un emailing !
L'affichage est correct en version ordi mais saute en vue tel

<img class="social" width="32" height="32" style="width: 25px; height: 25px; margin: 5px;" src="https://az551914.vo.msecnd.net/web/SPA_resources/DndEditor_v2/social_links/circle/full/linkedin.png">
<img class="social" width="32" height="32" style="width: 25px; height: 25px; margin: 5px;" src="https://az551914.vo.msecnd.net/web/SPA_resources/DndEditor_v2/social_links/circle/full/youtube.png">


Merci pour votre aide
Modifié par Elea (05 Jan 2024 - 11:54)
Faire des mails avec du HTML inclus qui s'affiche correctement sur tous les clients de messagerie est une opération difficile, car ce qui marche que un client ne marche pas forcément sur un autre.
Dans le code ci-dessus il n'y a rien qui dise que ça doit être centré.
Pour être à peu près certain que la présentation soit correcte sur la plupart des clients de messagerie, il est préférable d'éditer les feuilles de style et utiliser style="..." dans les balises et ne pas mettre des class="..." qui ont une bonne chance de ne pas être pris en compte dans certains clients de messagerie.
J'écrirais quelque chose comme :

<div style="width:100%;text-align:center;">
    <img ...>
    <img ...>
</div>

voir https://www.alma-musica.net/tests/images-test.html
Exact pour style, j'ajouterais :
Je ne sais pas si vous lisez l'Anglais, mais on en parle ici
https://stackoverflow.com/questions/47672847/center-image-in-html-mail
L'une des solutions données, avec table :
<table align="center" width="75%">
    <tr>
        <th>
            <div style="margin: 0 auto; text-align: center;">
                <img align="center" src="[votre_image ou un lien https)]" alt="" width="207" height="55" border="0"/>
            </div>
        </th>
    </tr>
</table>

Je n'ai pas testé. Il faut aussi penser au responsive, et ne pas oublier la balise alt pour les images.
Oui, contrairement à ce qu'on fait en HTML 5 où on évite (et même proscrit!) l'utilisation des <table> pour les mises en page, cette technique ancienne est toujours d'actualité dans les mail.
Merciii! ça fonctionne !

En effet je m'arrache souvent les cheveux sur la mise en page qui saute selon outlook, gmail etc. même chose en responsive.

Je vais tester mon emailing sous toutes les coutures avant l'envoi mais ça passe sur les 1ers tests Smiley biggrin

Merci encore, je garde ce forum dans mes favoris ! Smiley loveu
Prévenir un modérateur
Répondre au sujet
Aller à