Product Design Lessons
Responsive Email Design | Lesson #107
Bulletproof Centering in HTML Emails
Centering elements in Foundation for Emails
Ironically, vertically centering things in HTML emails is relatively easy compared to web development. The challenge is coming up with a centered layout that tests well across clients. Surprisingly, a lot of the solutions out there did not seem to test well – and the major problem child was Outlook (surprise, surprise). You’ll commonly need to center images, text, buttons, and the email's container for your designs. In this lesson we’ll learn some different techniques (and hacks) to center anything in emails.
Centering Text
Luckily, this is easy. You can center any piece of text with one class, .center.
I'm centered, like a boss!
<h4 class="center">I'm centered, like a boss!</h4>
Centering the Container
The second most common element you’ll center in your design is the container. The container is what “contains” your email’s content. It is centered by default in the Foundation for Emails boilerplate and we’ll explain how.
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="container">
<tr>
<td>
<!-- Email Content -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
Some clients strip out the <body> tag and others won’t respect setting margin: 0 auto; on table.container.
We use three methods to ensure that every email client respects our wishes of a centered container.
This is our standard centering “recipe”. Combining these three redundant methods usually results in consistent rendering across clients.
- align: center; - Supported in all email clients and works for “most” elements
- .center class - The applies text-align: center; for block-level elements
<center>tags - This centers block-level elements. The<center>tag has been deprecated in HTML5 but the doctype for emails is not HTML5 and it's still necessary for some email clients.
Center an Image
You’ll probably need to do this often. Center an image that is NOT full width inside the container. Sounds simple, and it is.
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<center>
<!-- Centered image -->
<img class="center" src="http://placehold.it/125x125">
</center>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
The class .center works to center an image because images by default our display: inline; and can be centered like text. As a fallback for multiple versions of Outlook and Apple mail, we add the <center> tags.
Center a Button
By default buttons expand to take up the width of the container they are in. So that means you can size a button with the columns.
<table class="row">
<tr>
<td class="wrapper">
<center>
<table class="four columns" align="center">
<tr>
<td>
<table class="button">
<tr>
<td>
<a href="#">Like on Facebook</a>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
So you can see in the above code example, this button is in four columns. Now to center it, we’ll actually be centering the columns themselves. Wrapping the columns in the <center> tag as well as adding the align="center" attribute to the table of the .columns will make this happen.
Bonus: Center Multiple Buttons (or Images)
What if you had multiple buttons (or images) that do not take up the full width of the container? Again, we’ll add the buttons into our columns to size them.
* This does not work for Android 4.4. Use two - six column buttons instead if you need to support this client. Further reading →
Luckily, the new version for Foundation for Emails has solved this by using <th> tags in place of <td> tags.
<table class="row">
<tr>
<td class="wrapper offset-by-two">
<table class="four columns">
<tr>
<td>
<table class="button">
<tr>
<td>
<a href="#">Like on Facebook</a>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td>
<table class="button">
<tr>
<td>
<a href="#">Share on Twitter</a>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
Since we have only have eight columns in this row, there are four columns left unused. By default the columns we have added here are positioned to the left. We can use an offset to “push” the columns over from the left. The offset class goes on the wrapper of the first set of columns to add padding to the left, therefore pushing the columns over.
We will offset the columns by two (.offset-by-two) because that will add two columns of space on the left and the right of our buttons.
So that's:
2 columns + 4 columns + 4 columns + 2 columns = 12 columns
On a mobile device, the buttons will stack and be full width.
Next Steps
Even though working with HTML emails can be challenging, being industrious can help you find all kinds of workarounds. When it comes to centering things reliably, you now have the tools to do it and know it will work in every client, even Outlook. With Foundation for Emails 2 coming just around the corner, building HTML will definitely suck less.
About the instructor
Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.
