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