I'm having a hard time figuring out how to vertically center a line of text with an icon, which is supposed to look like this
My first attempt is by nesting inside of mj-text
<mj-section background-color="#fff" padding="45px 0">
<mj-hero>
<mj-text align="center">
Find your next <span class="neon-red">Meetup</span> <img style="width: 12px" src="img/chevron--right.png" />
</mj-text>
</mj-hero>
</mj-section>
This doesn't vertically align texts and the icon
I've also tried making tables, but no improvements were made.
I found out that it was a simple css error. I needed to vertically-align the image, that was all 🤦♂️
<mj-section background-color="#fff" padding="45px 0">
<mj-hero>
<mj-text align="center">
Find your next <span class="neon-red">Meetup</span> <img style="width: 12px; vertical-align: middle" src="img/chevron--right.png" />
</mj-text>
</mj-hero>
</mj-section>
Related
I am writing html for an email and mock-ups of my footer looks like this:
I am facing issues with the vertical alignment of the last row in this mockup, where company logo follows the "Powered by" text. My <td> tag looks like this which is trying to achieve what is in the above mock-up:
<td height="20" style="height: 20px; vertical-align: middle;" align="center" valign="middle">
Powered by
<img valign="middle" src="http://cdn.mcauto-images-production.sendgrid.net/37cafc0cf58b37be/f5b816c0-c7cc-41eb-b01b-21a635204c2b/72x20.png" alt="logo" style="width:71px;height:20px; vertical-align: middle" />
</td>
The code above is not properly middle aligning the text and the logo and producing this for Outlook 2007, although it is working for other mainstream email clients:
You can see that logo and "Powered by" text are not properly aligned in the middle, how can I fix that? Also note that, I cannot use multiple <td> tags inside a <tr> for that purpose because I want horizontal center alignment as well.
My preferred method in these situations is to add a table with no width (equating to width:auto) and utilise table cell vertical alignment which is usually super reliable.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
Powered by
</td>
<td valign="middle" align="right" style="width:76px;">
<img src="https://via.placeholder.com/71x40" alt="logo" style="width:71px;height:40px; vertical-align: middle" />
</td>
</tr>
</table>
So no height set on any table cells, literally letting the image's natural height set the height of it's wrapping cell and then the text cell will match it naturally.
I've also set the image table cell to be slightly wider than the image and aligned the image to the right to give some space between the two pieces of content.
I have created a header for our companies email templates, luckily I was able to find a basic template on the web and tweak it to our requirements.
I am a real beginner when it comes to HTML so I am sure there are many errors in it too.
I need to figure out how to reduce the blue banner to 42px in height but everything I try ruins it. I have also been told that my 600 wide option is very old school and it should be 1200. I have tried to change this too, but then it loses all of the other formatting and looks terrible.
Its supposed to be responsive, if anyone could make any edit suggestions I would be very grateful.
header.txt
header.html
try changing the padding in the td containing the logo/image. To decrease the height of the blue banner, decrease the padiing at top and bottom of the above mentioned table data.
This helps you but another way is to decrease the logos height.
From looking at the codes, there is no specific "height" that is being assigned to the table containers that you can change to specify to 42px. The most that you can do is to remove the "top" and "bottom" padding from the containers inside to make the header's height smaller.
Here's a sample code with the changes. If you notice, I changed the top and bottom padding to 0px. For the second td, I left 5px for the top padding to add some spaces between the logos and the top edge of the screen. If you want to edit the width, I change the width to 800px but you also need to adjust the widths of the 2 containers inside the table. For example, I changed them from 270px to 370px each.
Lastly, I agree that this "template" that you found seems very complex and it would be better to learn a little bit of basic html and css and what you're trying to do is simple and can be done with much simpler codes. Good luck!
<center>
<table cellspacing="0" cellpadding="0" width="800" class="w320">
<tr>
<td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;">
<a href="https://www.hayley-group.co.uk/" style="text-decoration:none;">
<img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/>
</a>
</td>
<td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="https://www.facebook.com/HayleyGroup/">
<img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://twitter.com/HayleyGroup">
<img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://www.linkedin.com/company/hayley-group">
<img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
I've been screwing around with this for almost 2 hours and still can't get it to render the right way in Microsoft Outlook.
It was enough of a pain to get it to render in Internet Explorer, but I got it:
Still, here's how it looks as an HTML email in Outlook:
Don't worry about the line break for now; the problems I need to fix are
(1) The 1 pixel of white vertical space between the left piece and center piece
(2) The center piece having pixel more height than the left and right pieces
Here's the HTML:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
<td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
CLICK HERE TO LEARN MORE
</td>
<td align="left" width="6">
<img src="images/right-button-corner.png" style="display:block;" height="35"/>
</td>
</tr>
</table>
If I can't get it, I'm going to give up and use a single image. Any input much appreciated!
In regard to the height issue.
The height of the middle td is the content height (in this case it is line-height) + padding-top + padding-bottom.
You can remove padding declaration and valign and width attributes to make text vertically aligned to the middle and your button will be scaling horizontally (no breaks). I assume that would be good choice, considering you coded fixed height value of 35px.
Example of the middle <td>:
<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
<a href="http://example.com" style="color: #FFF; font-size: 14px;
font-family: Arial; text-decoration: none;">
CLICK HERE TO LEARN MORE</a>
</td>
Additional Notes
You can control how the call-to-action text should break by using entity. For example CLICK HERE TO LEARN MORE will break after "HERE" if the td width is insufficient to fit the text in one line.
Images should have border: none inline style to prevent uncontrolled gaps.
Also note, that valign attribute value center is incorrect. It can have values of top, bottom, or middle which is default.
There are more issues with your code.
Validate your code with some tool, for example http://validator.w3.org/.
I would try the following.
Try align="right" on the left button image:
<td align="right" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
I'm designing a wordpress page inside of the wordpress editor, and I can't figure out how to get the grey image placeholder to align to the top of the table cell. As long as the text in the left cell doesn't go below the grey image, everything is fine. But as soon as the text gets below the bottom of the image, the image pushes down. Here's the code:
<table border="1">
<tbody>
<tr>
<td style="vertical-align: top;">
<img class="alignleft size-full wp-image-71" alt="webi" src="#"
width="437" height="114" />
<p>
SOME TEXT
</p>
</td>
<td style="width: 355px;">
<img class="alignright size-full wp-image-61" alt="palvelut_kuvapaikka"
src="#"
align="top" width="355" height="355" />
</td>
</tr>
</tbody>
</table>
Just set the vertical-align: top property on the right td as well?
to align it to the top in a table you need to use in css: vertical-align: top
I have an html newsletter which works in most email carriers but the formatting is messed up in outlook. I have put vspace="10" on the image tag to put 10px margin on the top and bottom of the image to have a space between the image and text below it. However, in Outlook the vspace is not being picked up and the text appears directly under the image with no space between.
Does anyone know how to get this to work? I tried to put a margin-bottom of 10px on the image, but again this did not work.
It might be easier to use a nested table and define the height of the row to be 10px. What you are contending with in Outlook 2007+ is Word HTML rendering which handles CSS in it's own special way.
With HTML Email there is a lot of nuances between the different browsers. One thing i have learnt from creating emails is that it needs to be extremely simple. Both margin & padding are not supported by Outlook (due to it using the word rendering engine).
The solution
Replace the image and the space with a table containing 2 spacer gifs and the image in the centre. For example (you need to use absolute paths to your images):
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="YOUR IMAGE" width="" height="" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
</table>