gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:58:37 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com