I have built template and tested in Litmus and the images align center, in an HTML browser it's centered but when it comes through to iPhone the images align left and I'm baffled why, it's either a mistake in the code I've made or bug in iPhone...

Here is my code:

    <!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <title>Switch &amp; Save</title>

    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />

    <style>
        /* CLIENT-SPECIFIC STYLES */
        body, table, th, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, th { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        th{ font-weight: normal; }
        img { -ms-interpolation-mode: bicubic; }

        /* 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;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; }

        /* 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;
        }

        a{
            word-wrap: break-word;
            color:inherit;
            text-decoration: none !important;
        }

        img {border: 0 none;}

        p{margin: 1em 0;padding: 0;}     

        @media only screen and (max-width: 600px) {
            .emailEditor-canvas {
                width: 100%;
            }

            /*Padding*/
            .padding-horizontal-10{
                padding:0 10px !important;
            }

            /*Text Alignment*/
            .text-align-center{
                text-align: center !important;
            }

            /*Show and Hide*/
            .hide {
                display: none !important;
            }

            .show{
                display: block !important;
                height:100% !important;
            }

            .show-nav{
                display: block !important;
                height:100% !important;
                font-size:13px !important;
                line-height: normal !important;
            }

            .show-nav-item{
                display: inline-block !important;
                height:auto !important;
                padding:10px 0 !important;
                color:#ffffff !important;
                font-weight: normal !important;
                font-size:13px !important;
                font-family: Arial !important;
                line-height: normal !important;
            }

            .show-add-padding{
                display: block !important;
                height:100% !important;
                padding:20px 0 10px 0;
            }

            .logo-padding{
                padding:0 10px 10px 10px !important;
            }

            /*Columns (Reponsive)*/
            .column-article {
                display: block !important;
                width: 100% !important;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-align: left !important;
                padding:10px 0 0 0 !important;
            }         

            .column-image{
                display: block !important;
                width: 100% !important;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-align: center !important;
            } 

            .column-center-first {
                display: block !important;
                width: 100% !important;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-align: center !important;                
                padding:0 0 20px 0 !important;
            }   

            .column-center {
                display: block !important;
                width: 100% !important;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-align: center !important;                
            }         


            /*Custom Styles*/
            .column-center-extra-padding{
                display: block !important;
                width: 100% !important;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-align: center !important;
                padding:20px 0 !important;
            }   

            .banner-padding-outer{
                padding:0 0 10px 0 !important;
            }

            .banner-padding{
                padding:70px 10px !important;
            }         

            .banner-title{
                font-size:26px !important;
            }

            .banner-mobile-display{
                display:inline-block !important;               
                width:77px !important;  
                height:106px !important;
                max-height: 100% !important;                
                max-width: 100% !important;
            }

            .article-image{
                width:100% !important;
                display: inline-block !important;
                text-align: center !important;
                min-width:100% !important;
                max-width:100% !important;
            }

            .article-content{
                width:100% !important;
                display: block;
                padding:10px 0 0 0 !important;
            }

            .cta-mobile-display{
                display:inline-block !important;               
                width:100% !important;  
                max-height: 100% !important;                
                max-width: 100% !important;
            }

            .table-icon-display{
                padding:10px;
                display: inline-block !important;
                width:inherit !important;
                height:inherit !important;
                min-width:202px !important;
                min-height: 105px !important;
                max-height: 100% !important;                
                max-width: 100% !important;
            }

            .side-padding-only{
                padding:0 10px !important;
            }

            .cta-responsive{
                padding:0 0 10px 0 !important;
                text-align: center !important;
            }

            .footer{
                padding:20px 10px !important;
            }

        }

        @media only screen and (max-width: 370px) {
            .banner-padding{
                padding:40px 10px !important;
            }
        }

    </style>
</head>
<body style="font-size: 12px; font-family: Arial; margin: 0; padding:0; background-color: #eeeeee" bgcolor="#eeeeee" alink="#000" link="#000" vlink="#000">

<table class="emailEditor-canvas" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee" style=";background-color:#eeeeee;font-size:0px;line-height:0px;height:0px;display:none;visibility: hidden;overflow: hidden;max-height:0px;">
    <tr>
        <td style="font-size:0px;line-height:0px;height:0px;display:none;visibility: hidden;overflow: hidden;max-height:0px;">
            Find out why it's never been a better time to join NAPIT | 
        </td>
    </tr>
</table>

<table class="emailEditor-canvas" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee" style="background-color:#eeeeee;">
    <tr>
        <td style="font-size:11px;font-family: Arial;font-weight: normal;padding:5px;text-align: center;">                       
            <a href="http://$CANTREAD$" style="color: #000000; text-decoration: none;">View in browser</a>
        </td>
    </tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#eeeeee" style="background-color:#eeeeee;">
    <tr>
        <th align="center">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <th align="center" valign="top" width="600">
            <![endif]-->

            <!--Outer Shell-->

            <table class="emailEditor-canvas" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;background-color:#ffffff;">

                <!-- CTA -->
                <tr>
                    <td class="side-padding-only" style="padding:0 10px 10px 10px;">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                            <tr>
                                <td width="50%" class="column-center">
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td class="cta-responsive" style="padding:0 5px 0 0;">
                                                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                    <tr>
                                                        <td class="ee_editable">
                                                            <img src="http://www.developmentplayground.co.uk/emailmarketing/napit/napit-newsletter/images/cta-image.png" alt="CTA" style="max-width:285px;width:285px;" class="ee_editable">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>                                            
                                        </tr>
                                    </table>
                                </td>
                                <td width="50%" class="column-center">
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td class="cta-responsive" style="padding:0 0 0 5px;">
                                                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                                    <tr>
                                                        <td class="ee_editable">
                                                            <img src="http://www.developmentplayground.co.uk/emailmarketing/napit/napit-newsletter/images/cta-image.png" alt="CTA" style="max-width:285px;width:285px;" class="ee_editable">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>  
                                        </tr>
                                    </table>
                                </td>
                            </tr>                            
                        </table>
                    </td>
                </tr>
                <!-- end of CTA -->
                            <a href="https://www.napit.org.uk/privacy.aspx" style="color: #ffffff; text-decoration: none;">Privacy Policy</a> | <a href="http://$UNSUB$" style="color: #ffffff; text-decoration: none;">Unsubscribe</a> | <a href="http://$FORWARD$" style="color: #ffffff; text-decoration: none;">Forward</a>
            </table>
            <!--End of Outershell-->    


            <!--[if (gte mso 9)|(IE)]>
            </th>
            </tr>
            </table>
            <![endif]-->
        </th>
    </tr>
</table>    
</body>
</html>

Can anyone help please?