jpg不是我的HTML代码的中心

时间:2011-01-03 09:59:59

标签: html image

你好我正试图弄清楚如何根据我的代码对这个图像进行居中:只是用中心标签编辑它,但仍然是相同的:

<html> 
<head> 
    <!-- This is a simple example template that you can edit to create your own custom templates -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>*|MC:SUBJECT|*</title> 
    <style type="text/css" media="screen"> 
        /* NOTE: CSS should be inlined to avoid having it stripped in certain email clients like GMail. 
        MailChimp automatically inlines CSS for you or you can use this tool: http://www.mailchimp.com/labs/inlinecss.php. */

            /**
             * @tab Page
             * @section background color
             * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding.
             * @theme page
             */
            body {
                /*@editable*/ background-color: #cccccc;
                text-align:center;
            }

            /**
             * @tab Page
             * @section border
             * @tip Add a border to help your template content stand out from your email's background.
             */
            #layout {
                /*@editable*/ border: 5px solid #999999;
                /*@editable*/ background:#ffffff;
                margin: 10px auto;
                text-align:left;
            }

            /**
             * @tab Header
             * @section header bar
             * @tip Choose a set of colors that look good with the colors of your logo image or text header.
             */
            #header {
                /*@editable*/ background-color: #cccccc;
                /*@editable*/ padding: 0px;
                /*@editable*/ color: #333333;
                /*@editable*/ font-size: 30px;
                /*@editable*/ /*font-family: Georgia;*/
                                    /*@editable*/ /*font-family: Calibri;*/
                /*@editable*/ /*text-align: left;*/

            }


            /**
             * @tab Body
             * @section default text
             * @tip This is the default text style for the body of your email.
             * @theme content
             */
            #content {
                /*@editable*/ /*font-size: 13px;*/
                                    /*@editable*/ font-size: 18px;
                /*@editable*/ color: #333333;
                /*@editable*/ /*font-family: Helvetica;*/
                                    /*@editable*/ font-family: Calibri;
                /*@editable*/ line-height: 1.25em;
                /*@editable*/ padding: 10px 30px;
            }

            /**
             * @tab Body
             * @section title style
             * @tip Titles and headlines in your message body. Make them big and easy to read.
             * @theme title
             */

                            .primary-heading {
                /*@editable*/ /*font-size: 28px;*/
                                     /*@editable*/ font-size: 26px;                                      
                /*@editable*/ font-weight: bold;
                /*@editable*/ color: #8b0000;
                /*@editable*/ /*font-family: Georgia;*/
                                    /*@editable*/ font-family: Calibri;
                /*@editable*/ /*line-height: 150%;*/
                                     /*@editable*/ line-height: 100%;
                /*@editable*/ margin: 25px 0 0 0;
                                    /*@editable JUST ADDED*/ text-align: center;

            }


            /**
             * @tab Body
             * @section subtitle style
             * @tip This is the byline text that appears immediately underneath your titles/headlines.
             * @theme subtitle
             */

                            .secondary-heading {
                /*@editable*/ /*font-size: 20px;*/
                /*@editable*/ /*font-weight: bold;*/
                /*@editable*/ color: #000000;
                /*@editable*/ font-style: normal;
                /*@editable*/ /*font-family: Georgia;*/
                /*@editable*/ margin: 25px 0 5px 0;
            }


            /**
             * @tab Footer
             * @section footer
             * @tip You might give your footer a light background color and separate it with a top border
             * @theme footer
             */
            #footer {
                /*@editable*/ background-color: #eeeeee;
                /*@editable*/ border-top: 0px none #ffffff;
                /*@editable*/ padding: 20px;
                /*@editable*/ font-size: 10px;
                /*@editable*/ color: #333333;
                /*@editable*/ line-height: 100%;
                /*@editable*/ font-family: Verdana;
            }

            /**
             * @tab Footer
             * @section link style
             * @tip Specify a color for your footer hyperlinks.
             * @theme link_footer
             */
            #footer a {
                /*@editable*/ color: #800000;
                /*@editable*/ text-decoration: underline;
                /*@editable*/ font-weight: normal;
            }

            /**
             * @tab Page
             * @section link style
             * @tip Specify a color for all the hyperlinks in your email.
             * @theme link
             */
            a, a:link, a:visited {
                /*@editable*/ color: #800000;
                /*@editable*/ text-decoration: underline;
                /*@editable*/ font-weight: normal;
            }
    </style> 
</head> 
<body> 
    <table id="layout" border="0" cellspacing="0" cellpadding="0" width="600"> 
        <tr align="center"> 
            <td id="header" align="center" width=600> 
                <!-- NOTE: This image would trigger the display of a placeholder block with edit links when shown in the MailChimp editor interface --> 
                <img mc:edit="header-image" style="max-width: 600px;" src="http://www.wikima4.com/assets/images/mailchimpImages/wikima4_karte.jpg" mc:allowdesigner mc:allowtext /> 
            </td>               
        </tr> 

        <tr> 
            <td id="content" mc:edit="content"> 
                <h1 class="primary-heading"></h1>                              
     </p> 


          </td> 
        </tr> 

        <tr> 
            <td id="footer" mc:edit="footer"> 
                <p><!-- *|IFNOT:ARCHIVE_PAGE|* -->
                <a href="*|ARCHIVE|*" class="adminText">view email in browser</a> | <!-- *|END:IF|* -->
                <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* | <a href="*|FORWARD|*">Forward to a friend</a></p> 
                                    <!-- *|IFNOT:ARCHIVE_PAGE|* -->
                <p>*|LIST:DESCRIPTION|*</p> 
                <p>*|HTML:LIST_ADDRESS_HTML|*</p> 
                                    <!-- *|END:IF|* -->

            </td> 
        </tr> 

    </table>
            <span style="padding: 0px;"></span>
</body> 

3 个答案:

答案 0 :(得分:2)

我看到这是一个mailchimp模板。使用表格包装图像并将包装align的{​​{1}}属性设置为居中。

邮件模板很糟糕。我知道。

更新:

td

答案 1 :(得分:1)

检查所有边距和所有内容,它们可能会将图像偏离中心。

答案 2 :(得分:0)

不推荐使用HTML align。在TD标签内使用带样式的DIV,例如

<td id="header" width=600> 
<div style="text-align:center;"><img mc:edit="header-image" style="max-width: 600px;"
src="http://www.wikima4.com/assets/images/mailchimpImages/wikima4_karte.jpg"
mc:allowdesigner mc:allowtext /></div>
</td>