段落未正确对齐答案

【问题标题】：Paragraph not aligned properly段落未正确对齐
【发布时间】：2013-06-19 21:43:13
【问题描述】：

基本上，我正在尝试使用 HTML 和 Dreamweaver 创建电子邮件模板。这是我的第一个模板。我不能在电子邮件模板中使用<div> 标记这一事实真的让我很头疼。我很难将社交图标与“我是社交文本”对齐。它们都在td 标签内分配了align="center"。下面显示的图像是我的电子邮件模板的“页脚”部分。

截图如下：

我只发布页脚部分的代码，因为我的内容和页眉部分工作正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    background: #CCC;
}
 h4.copyright, p.copyright {
    padding-left: 50px;
    color: #FFF
}
h4.social {
    padding-left: 50px;
    color: #fff;
}
p.footer {
    color: #FFF;
}
</style>
</head>

<body>

<table width="600" align="center" bgcolor="#999999">
  <tr>
    <td align="center"><h4 class="social">I am also social</h4></td>
  </tr>
  <tr>
    <td align="center"><p class="footer">
        <a href="http://www.facebook.com/trickyphotoshop">
          <img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
        </a>
        <a href="http://www.tricky-photoshop.com">
          <img src="images/g+.gif" width="25px" height="25px" />
        </a>
        <a href="http://www.twitter.com/trickyphotoshop/">
          <img src="images/twitter.gif" width="25px" height="25px" />
        </a>
      </p></td>
  </tr>
  <tr>
    <td height="10"><h4 class="copyright">Copyright Area</h4></td>
  </tr>
  <tr>
    <td height="10"><p class="copyright">
        &copy All rights reserved
      </p></td>
  </tr>
</table>
</body>
</html>

基本上我想要两件事：

我想将“我也是社交”文本与三个图标（即 facebook、twitter、google+）正确对齐
如您所见，“版权区域”和“保留所有权利”之间有一个巨大的空间。我想删除这个空间。

我知道我的代码不太专业，但这是我的第一个 HTML 代码。

【问题讨论】：

标签： html html-table alignment html-email email-client

【解决方案1】：

你应该改变样式如下：

h4.social {
  /* remove: padding-left: 50px; */
  color: #fff;
}
h4.copyright, p.copyright {
  padding-left: 50px;
  margin: 0px; /* add this line */
  color: #FFF;
}

我建议使用 this chrome extension 来“玩” CSS 更改

【讨论】：

谢谢。为 h4.social 添加 "padding-left: "50px" 确实是一个可怕的错误