HTML - 如何左对齐保持在表格的中心?

标签 html css

这是我第一次真正体验 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

那么,如何在不去中心化的情况下将文本对齐到红线之后呢?

enter image description here

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

最佳答案

<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 - 如何左对齐保持在表格的中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47168856/

相关文章:

javascript - 将新的内部对象插入到可观察对象数组中并更新 DOM

html - 如何拥有一系列不同的交替颜色

css - Wordpress:子页面的内容似乎被隐藏了

html - H4的默认字体大小是多少?

css - Joomla - 在 Joomla 上隐藏图像

javascript - 我的 response.jsp 无法正确填充字段

javascript - 查找具有没有 id 和类的文本值的 b 标签的父级

html - 通过引用托管在不同网站上的外部热链接图像来应用 CSS

css - 仅将类应用于具有类的元素而不是所有子元素

html - 如何使我的 "i"周围的圆圈完全呈圆形?