I need to center the logo image of my client in the body of an email. How do I do that? (Don't worry - I'm not using an image in an attachment field. )
This is what I currently have, but the image is not actually centered. Can anyone help?
@TheTimeSavingCo - I am trying to insert and image next to a sentence to draw attention to it, but of course the image and text line are not center aligned on the horizontal (since the image is square, the line of text is bottom aligned as you see below).
Is there any possible way to create a table (ideally with ability center the row data) so that I can create the effect of this being center aligned? I have tried inserting HTML tables manually with style tags to vertical-align: middle but it seems AT didn’t recognize the code and it just rendered as actual code in my e-mail :(
Hmm, try this?
<div style="display: flex; align-items: center; "><img width="400" src="https://www.firefox.com/media/img/logos/firefox/logo-word-hor.f3b18871b657.svg" alt="firefox logo"><p>click here to view details</p></div>
If that doesn’t work, could you provide the html you have so far?
I tried that code exactly as written (no other html) and I got the same result (although I had to use a .png as I can’t get .svgs to render in my e-mails). Once it rendered though, there was no difference in the alignment.
Could you provide the html you have so far please? Working off of what you’ve already got would make it a lot easier to help!
Here’s one that seems to work via a table:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0"><tr><td valign="middle" style="vertical-align:middle;margin:0;line-height:0;font-size:0"><img src="https://www.gstatic.com/marketing-cms/assets/images/fa/21/b548040b49479c38e2d2e0a65b9f/fold.png" width="400" style="display:block"></td><td valign="middle" style="vertical-align:middle;margin:0;padding-left:10px;font-family:Arial,sans-serif;font-size:14px;line-height:1">click here to view details</td></tr></table>
This is all I have been doing:
<img src="https://cdn-icons-png.flaticon.com/128/12785/12785583.png" width ="32"> Click here to view the full details](MY AIRTABLE URL) and to approve/reject.
Now I get a worse result where the icon/image I am trying to display is above the sentence. That also happened in the previous test, but removing the <p> tag you had fixed that part there. I don’t see how I would adjust in the above code.
Hm interesting! What browser and email client are you using? I’m using Gmail and your code shows up like this for me:
After I updated it to use <a> it looks like this:
Outlook
Hm, I just tried sending it to Outlook and it looks fine, but the link got stripped out
I tried the original markdown version instead and got this:
And so I think this really comes down to how each email client interacts with the email that Airtable sends out and we’re just going to need to experiment a bunch I’m afraid. May want to try using the Send Outlook Email action to see if that helps or maybe even using Make to send the email instead?
You may also want to open a support ticket with Airtable to see what they can suggest!