html - 垂直对齐
问题描述
我是新手，所以如果这非常容易，我提前道歉。
我正在处理 HTML 电子邮件并尝试尽可能多地保持 CSS 内联。我现在已经包含了我的代码的链接：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！” 并且该列中的正文与顶部垂直对齐。我错过了什么？
此电子邮件完全内置于表格中，因此我为我的代码状态道歉。任何人都可以提供一些建议吗？谢谢！
解决方案
这是因为您使用 ah3来包装“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。
希望这可以帮助！
推荐阅读
- python - python中线性插值的逻辑错误
- windows - 为编辑工具编写批处理脚本程序？
- r - 在 ggplot 中将日期显示为 x 轴
- sql - 如何根据职位层次结构获取组织单位的层次关系
- c++ - 为什么 CMake COMPILER_DEFINITIONS 不传播到子目录？
- python - 使用多面体从 GeoJSON 创建 shapefile？
- spring-boot - 控制器未映射
- c# - 如何将 Kinect 插件中的 GreenScreen 图像替换为我想要的 Texture2D？
- javascript - TypeError：无法从 PDF 组件中读取未定义的属性“forEach”
- sql - 无法使用 RIGHT 函数创建计算列，因为 CHARINDEX 返回 null