Question

这是我第一次使用HTML体验。我的目标是重现这样的结果：

enter image description here

为此，我在表格内创建。我是在代码开发的开始，但到目前为止我已经做到了这一点：

<body>
<table id="container" style="width: 98%;">
  <table id="header" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
    <td valign="top" align="center">
      TODO
    </td>
  </table>
  <table id="content" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
    <td valign="top" style="text-align: center">
      <h2 align="center" style="line-height: 40%; font-family: 'Roboto';">Beginner's Guide to Web Development</h2>
      <p align="center" style="line-height: 35%; font-family: 'Roboto';">Curious about web development but not sure where to start?</p>
      <p align="center" style="line-height: 35%; font-family: 'Roboto';">Or maybe you just need to brush up on some of the basics.</p>
      <p align="center" style="line-height: 35%; font-family: 'Roboto';">Our new Beginner's Guide to Web Development has you</p>
      <p align="center" style="line-height: 35%; font-family: 'Roboto';">covered! Read through it now to explore (or rediscover) the</p>
      <p align="center" style="line-height: 35%; font-family: 'Roboto';">foundations of web dev.</p>
    </td>
  </table>
  <table id="footer" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
    <td valign="top" align="center">
      TODO
    </td>
  </table>
</table>

结果是：

enter image description here[2

那么，如何将文本与红线对齐但没有下降？

OBS：我知道使用style标记是一种不好的做法，但目的是开发一个可以在任何电子邮件应用程序中读取的代码。

Answer 1

<table id="container" style="width: 98%;">
   <table id="header" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
      <td valign="top" align="center">
         TODO
      </td>
   </table>
   <table id="content" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
      <td valign="top" style="text-align: center">
         <div style="
            width: 76%;
            margin: 0 auto;
            text-align: left;
            ">
            <h2 style="line-height: 40%; font-family: 'Roboto';">Beginner's Guide to Web Development</h2>
            <p style="line-height: 35%; font-family: 'Roboto';">Curious about web development but not sure where to start?</p>
            <p style="line-height: 35%; font-family: 'Roboto';">Or maybe you just need to brush up on some of the basics.</p>
            <p style="line-height: 35%; font-family: 'Roboto';">Our new Beginner's Guide to Web Development has you</p>
            <p style="line-height: 35%; font-family: 'Roboto';">covered! Read through it now to explore (or rediscover) the</p>
            <p style="line-height: 35%; font-family: 'Roboto';">foundations of web dev.</p>
         </div>
      </td>
   </table>
   <table id="footer" border="1" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
      <td valign="top" align="center">
         TODO
      </td>
   </table>
</table>

HTML - 如何保持对齐保持在桌子的中心？

1 个答案: