J'essaie d'aligner verticalement du texte et un bouton avec une section de 2 colonnes. Pour clarifier mon objectif, c'est avoir le texte / le bouton d'aligner avec le milieu vertical de l'image à son droit.
J'ai essayé d'ajouter l'étiquette ci-dessous est un exemple de mon code et un lien vers l'éditeur MJML avec un échantillon démontrant le problème. P> vertical-align = "Middle" sur " Code> MJ-colonne code> mais cela ne semble pas avoir d'effet. Cependant, alignement sur le bas fonctionne. P> <mjml>
<mj-body>
<mj-section>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-column width="50%" vertical-align="middle">
<mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</mj-column>
<mj-column width="50%" vertical-align="middle">
<mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
<mj-button href="https://www.google.com">Get a Kitten</mj-button>
</mj-column>
<mj-divider border-color="#F45E43"></mj-divider>
</mj-section>
</mj-body>
</mjml>
3 Réponses :
Si j'ai eu l'idée correctement, mettez vertical-align = "moyen" sur mj-colonne s. s.
Bonne réponse. Et, l'attribut vertical-align se comporte de manière imprévisible dans HTML. Je ne ferais pas confiance à cela pour être cohérent entre tous les clients de messagerie. MJML passera à HTML ce que vous le disez, mais à tester soigneusement!
Selon la mention de @Curveball, vous pouvez y parvenir en ajoutant verticalement-align = "milieu" sur les deux colonnes.
Votre meilleur pari est d'ajouter du rembourrage comme ci-dessous. Je l'ai essayé et ça a l'air à peu près ce dont vous avez besoin. Permettez-moi de savoir si cela a aidé.