In this article, I am going to put to the test the basic bulletproof button techniques.
Ironically, vertically centering things in HTML emails is almost simple compared to web development. The challenge is due up with a centered layout that searches well across clients. Surprisingly, a lot of the quick fix out there did not sound to test well – and the major problem child was Outlook (surprise, surprise). You’ll regularly need to center images, text, buttons, and the email’s bag for your designs.
Luckily, this is easy. You can center any quantity of text with one class,
I’m centered, like a boss!
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 omission in the Foundation for Emails average and we’ll explain how.
Some clients strip out the tag
<body> and others won’t respect setting on
margin: 0 auto;
We use three methods to ensure that every email client regards our wishes of a centered container.
This is our accepted centering “recipe”. Combining these three diffuse 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 tag
<center>has been condemning in HTML5 but the doctype for emails is not HTML5 and it’s still necessary for some email clients.
Center an Image
You’ll apparently need to do this often. Center an image that is NOT full girth inside the container. Sounds simple, and it is.
The class works
.center to center an image because picture by default our
display: inline;and can be centered like text. As a retreat for multiple versions of Outlook and Apple mail, we add the tags
Center a Button
By default buttons expand to profit up to the width of the container they are in. So that means you can size a button with the columns.
So you can see in the above code example, this button is in four columns. Now to center it, we’ll really be centering the columns themselves. Wrapping the columns in the tag
<center> as well as adding the attribute
align="center" to the table of the
.columns will make this happen.