<td> 上的垂直对齐
Vertical Alignment on a <td>
我是新手，所以如果这非常简单，我提前道歉。
我正在处理 HTML 电子邮件并尝试尽可能多地保持 CSS 内联。我已经在我的代码中包含了一个 link，因为它现在是：https://codepen.io/chaser87/pen/xxZEdEX
<!doctype html>
<html lang="en">
<head>
<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">
<title>News of Note</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
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; }
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Learn the latest! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<img src="Email Template/img/header2.jpg" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most high. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! Surround yourself with angels. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up.</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="1" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="1" cellpadding="0" cellspacing="0" width="58%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>Take a Tour!</h3>
</span>
<p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="58%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>A Top-Rated Restaurant</h3>
</span><p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 0px 0px; vertical-align: top;"><span style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'">More Useful Links</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我不知道如何使该列中的 "Take a Tour!" 和正文垂直对齐到顶部。我错过了什么？
这封电子邮件完全是用表格构建的，所以对于我的代码状态，我深表歉意。任何人都可以提供一些建议吗？谢谢！
这是因为您使用 h3 来包装 "Take a Tour!"，默认情况下它有一个 margin-top（还有一个 margin-bottom）。只需将它们声明为 0，您的句子就会上升到顶部！
您可以在 CSS 部分完成：
h3 {
margin-top: 0px;
margin-bottom: 0px;
}
或内联：
<h3 style="margin-top:0px;margin-bottom:0px;">Take a Tour!</h3>
这是正在运行的更新 Codepen。
希望对您有所帮助！
我是新手，所以如果这非常简单，我提前道歉。
我正在处理 HTML 电子邮件并尝试尽可能多地保持 CSS 内联。我已经在我的代码中包含了一个 link，因为它现在是：https://codepen.io/chaser87/pen/xxZEdEX
<!doctype html>
<html lang="en">
<head>
<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">
<title>News of Note</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
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; }
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Learn the latest! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<img src="Email Template/img/header2.jpg" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most high. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! Surround yourself with angels. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up.</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="1" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="1" cellpadding="0" cellspacing="0" width="58%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>Take a Tour!</h3>
</span>
<p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="58%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>A Top-Rated Restaurant</h3>
</span><p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 0px 0px; vertical-align: top;"><span style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'">More Useful Links</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我不知道如何使该列中的 "Take a Tour!" 和正文垂直对齐到顶部。我错过了什么？
这封电子邮件完全是用表格构建的，所以对于我的代码状态，我深表歉意。任何人都可以提供一些建议吗？谢谢！
这是因为您使用 h3 来包装 "Take a Tour!"，默认情况下它有一个 margin-top（还有一个 margin-bottom）。只需将它们声明为 0，您的句子就会上升到顶部！
您可以在 CSS 部分完成：
h3 {
margin-top: 0px;
margin-bottom: 0px;
}
或内联：
<h3 style="margin-top:0px;margin-bottom:0px;">Take a Tour!</h3>
这是正在运行的更新 Codepen。
希望对您有所帮助！