I've been working hard on creating an HTML email newsletter. I've organized the layout using various tables and inline CSS. Check out a live demo of my newsletter here.
One issue I'm facing is with an image labeled "Fright Night" in column 1 of a two-column layout. I'm trying to center the image vertically next to the content in column 2, but it's giving me a hard time.
Here's a snippet of my CSS code:
/* two columns */
.two-columns.last {
padding: 15px 0;
}
.two-columns .padding {
padding: 20px;
}
.two-columns .content {
font-size: 15px;
line-height: 20px;
text-align: left;
}
.button {
background-color: #ffffff;
color: #171a1b;
text-decoration: none;
padding: 12px 20px;
border-radius: 5px;
font-weight: bold;
}
.button-dark {
background-color: #171a1b;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
border-radius: 5px;
font-weight: bold;
}
In the HTML below, you can see how I have structured it using tables:
<!-- TWO COLUMN SECTION -->
<tr>
<td style="background-color: #26292b; color: #ffffff;">
<table width="100%">
<tr>
<td class="two-columns last">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="LINK"><img src="img/2022-Fright-Night.png" alt="" width="260" style="max-width:260px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<p style="font-weight: bold; font-size: 18px;">Fright Night</p>
<p style="padding-bottom: 16px;">Do you like chills and fright? Then, join St. Auggies' youth at Frontier City's Fright Night on Friday, October 28 from
6:00pm-10:00pm. Tickets are $42.99/per person. Open to youth and adults 12 & up.</p>
<a href="LINK" class="button">Sign Up</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
If you have any suggestions or recommendations for improvement, check out the full code here.