I have the following fiddle:
https://jsfiddle.net/7m0cytve/
which produces the expected result (centered image):
But align=center is deprecated.
When I change:
<td align="center" valign="top" style="padding: 15px 0;" class="logo">
to
<td valign="top" style="padding: 15px 0; text-align:center" class="logo">
the logo is no longer centered:
How do I remove align=center and get my logo to stay centered?
Set margin: 0 auto; on your image then its centered without alignment.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Responsive Email Template</title>
<!--
An email present from your friends at Litmus (@litmusapp)
Email is surprisingly hard. While this has been thoroughly tested, your mileage may vary.
It's highly recommended that you test using a service like Litmus (http://litmus.com) and your own devices.
Enjoy!
-->
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
@media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
.logo img {
margin: 0 auto !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
.padding {
padding: 10px 5% 15px 5% !important;
}
.padding-meta {
padding: 30px 5% 0px 5% !important;
text-align: center;
}
.padding-copy {
padding: 10px 5% 10px 5% !important;
text-align: center;
}
.no-padding {
padding: 0 !important;
}
.section-padding {
padding: 50px 15px 50px 15px !important;
}
/* ADJUST BUTTONS ON MOBILE */
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
.mobile-button {
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
display: block !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!-- HIDDEN PREHEADER TEXT -->
<div class="litmus-builder-preview-text" style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Entice the open with some amazing preheader text. Use a little mystery and get those subscribers to read through... ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>
<!-- HEADER -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff" align="center">
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="wrapper">
<tr>
<td valign="top" style="padding: 15px 0;" class="logo">
<a href="#" target="_blank">
<img alt="Logo" src="https://www.freelogodesign.org/Content/img/logo-samples/flooop.png" width="100" height="100" style="margin: 0 auto; display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 15px;">
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="responsive-table">
<tr>
<td>
<!-- COPY -->
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center; font-size: 32px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;" class="padding-copy">Your order is on its way!</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius,
leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 15px;" class="padding">
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="responsive-table">
<tr>
<td style="padding: 10px 0 0 0; border-top: 1px dashed #aaaaaa;">
<!-- TWO COLUMNS -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" class="mobile-wrapper">
<!-- LEFT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="left">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px;">Purchased Item (1)</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="right">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px;">$XX.XX</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- TWO COLUMNS -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" style="padding: 0;" class="mobile-wrapper">
<!-- LEFT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="left">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px;">Shipping + Handling</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="right">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px;">$X.XX</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- TWO COLUMNS -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" style="padding: 0;" class="mobile-wrapper">
<!-- LEFT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="left">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px;">Sales Tax</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="right">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px;">$X.XX</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 10px 0 0px 0; border-top: 1px solid #eaeaea; border-bottom: 1px dashed #aaaaaa;">
<!-- TWO COLUMNS -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" class="mobile-wrapper">
<!-- LEFT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="left">
<tr>
<td style="padding: 0 0 10px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px; font-weight: bold;">Total</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- RIGHT COLUMN -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="47%" style="width: 47%;" align="right">
<tr>
<td>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right" style="font-family: Arial, sans-serif; color: #7ca230; font-size: 16px; font-weight: bold;">$XX.XX</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 15px;">
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="responsive-table">
<tr>
<td>
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- COPY -->
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 0 0 0 0; font-size: 14px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color: #aaaaaa; font-style: italic;" class="padding-copy">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 15px;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
<tr>
<td>
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- COPY -->
<td align="center" style="font-size: 32px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;" class="padding-copy">How did we do?</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius,
leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 25px;" class="padding">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#256F9C"><a href="#" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 15px 25px; border: 1px solid #256F9C; display: inline-block;"
class="mobile-button">Let Us Know</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 0px;">
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<!-- UNSUBSCRIBE COPY -->
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 500px;" class="responsive-table">
<tr>
<td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
1234 Main Street, Anywhere, MA 01234, USA
<br>
<a href="#" target="_blank" style="color: #666666; text-decoration: none;">Unsubscribe</a>
<span style="font-family: Arial, sans-serif; font-size: 12px; color: #444444;"> | </span>
<a href="#" target="_blank" style="color: #666666; text-decoration: none;">View this email in your browser</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
