[英]HTML - How to left align keeping at the center of table?
这是我第一次真正的HTML经验。 我的目标是重现这样的结果:
为此,我在表中创建。 我正处于代码开发的开始,但这是我到目前为止的事情:
<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>
结果是:
那么,如何在不降低颜色的情况下使文本与红线对齐呢?
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.