Html 一种在 TR 中居中 TD 的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8649627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A way to center TD in TR?
提问by grace
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
我正在处理 HTML 电子邮件，并尝试将绿色 TD 居中放置在白色 TR 中，以便在绿色框的左侧和右侧有 20 像素的白色边距。
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
我尝试为绿色部分设置 TD 宽度并将边距 0 设置为 auto 但绿色只是扩展到 TR 的宽度。
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
尝试再放入 2 个 TD 以将绿色 TD 推入中心，但这也不起作用。
Including the code snippet, am having trouble with the TR that has #a6d971.
包括代码片段，我在使用 #a6d971 的 TR 时遇到了问题。
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine @ Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
采纳答案by Carlos Quijano
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
切换到 DIV 和 CSS，大多数电子邮件客户端都很好地支持样式，您可以在 TD 元素中使用 DIV，这样可以轻松居中或做其他您可能想做的事情。
For Example
例如
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
另请注意，如果您使用 DIV，您也可以避免使用表格。
回答by Jared Farrish
Hack on top of a hack.
在黑客之上破解。
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
Incidentally, the same thing should work with a DIV:
顺便说一句，同样的事情应该适用于DIV：
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
回答by Blazemonger
If you HAVE to use tables, might as well abuse them a little:
如果您必须使用表格，不妨稍微滥用它们：
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
回答by thoferon
I'm not a CSS expert but this works for me (with no extra tags) :
我不是 CSS 专家，但这对我有用（没有额外的标签）：
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
回答by Todd Baur
What are you talking about 'for emails'? You mean an email address, like <a href="mailto:[email protected]">Email Me</a>? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.
你在说什么“电子邮件”？你的意思是一个电子邮件地址，比如<a href="mailto:[email protected]">Email Me</a>？如果是这样，您需要一些 css 将链接置于 TD 的中心，或者与 TD 上的 colspan 结合使用。
