html - 如何在 CSS 中垂直居中动态高度的单元格？

Question

我正在使用一些表格来格式化页面。我想在屏幕中间垂直居中一个单元格。

<table width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" cellpadding="0" cellspacing="0" bgcolor="#dedede" style="-webkit-text-size-adjust:none; line-height: 66%;">
	 <tbody>
		 <tr>
			 <td valign="middle"> <!-- The problem is valign work only with a height element for that cell -->
				 <!-- This next table is the one I want to centre --><table width="600" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center" style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMTYlIiB5Mj0iMCUiPg0KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMGY4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNCUiIHN0b3AtY29sb3I9IiNmYWZkZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2YyZjhmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNlZGY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTBmMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iI2QzZWFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNjOWU1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjYjdkY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iI2FkZDdmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNhM2QyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iODclIiBzdG9wLWNvbG9yPSIjNmRiNGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMyOWNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxOTkwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+DQo8L3N2Zz4=);background: -moz-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%, hsla(208,100%,98%,1) 4%, hsla(0,0%,100%,1) 7%, hsla(0,0%,100%,1) 34%, hsla(208,100%,98%,1) 40%, hsla(208,100%,96%,1) 44%, hsla(208,100%,94%,1) 50%, hsla(208,100%,91%,1) 56%, hsla(208,100%,89%,1) 60%, hsla(208,100%,86%,1) 65%, hsla(208,100%,84%,1) 69%, hsla(208,100%,82%,1) 72%, hsla(208,84%,69%,1) 87%, hsla(208,100%,60%,1) 96%, hsla(208,100%,55%,1) 98%, hsla(208,100%,50%,1) 100%);background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,hsla(208,100%,98%,1)), color-stop(4%,hsla(208,100%,98%,1)), color-stop(7%,hsla(0,0%,100%,1)), color-stop(34%,hsla(0,0%,100%,1)), color-stop(40%,hsla(208,100%,98%,1)), color-stop(44%,hsla(208,100%,96%,1)), color-stop(50%,hsla(208,100%,94%,1)), color-stop(56%,hsla(208,100%,91%,1)), color-stop(60%,hsla(208,100%,89%,1)), color-stop(65%,hsla(208,100%,86%,1)), color-stop(69%,hsla(208,100%,84%,1)), color-stop(72%,hsla(208,100%,82%,1)), color-stop(87%,hsla(208,84%,69%,1)), color-stop(96%,hsla(208,100%,60%,1)), color-stop(98%,hsla(208,100%,55%,1)), color-stop(100%,hsla(208,100%,50%,1)));background: -webkit-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: -o-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: -ms-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbff', endColorstr='#0083ff',GradientType=1 );-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: #222 -25px 25px 70px;-moz-box-shadow: #222 -25px 25px 70px;box-shadow: #222 -25px 25px 70px;">
					 <thead>
						 <tr>
							<td  height="140px"></td>
						 </tr>
					 </thead>
					 <tbody>
						 <tr>
							 <td width="35">
						 </td>
							 <td width="530">
								 <font color="#5e5e5e" face="Arial, Helvetica, sans-serif" size="2" style="font-size: 12px;">
									<strong>Madame Monsieur,</strong>
									<br>
									<br>
									<br>	
										"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
									<br>
								</font>
						 </td>
							 <td width="35"></td>
						 </tr>
							 </tr>
								 <tr>
									 <td width="35"></td>
										 <td height="33" width="530">
											 <!--img src="http://lapostegp-t.neolane.net/res/img/0ACC00B0C045ED53D213B37D5CBB02E4.jpg" alt="" border="0" width="530" height="33" style="display: block;"-->
										 </td>
									 <td width="35"></td>
								 </tr>
							 </tr>
					 </tbody>
				 </table>
			 </td>
		 </td>
	 </tbody>
</table>

如果我使用 JavaScript 就可以了
然而，JavaScript 元素在电子邮件客户端中被过滤，并且对视口(viewport)单元的支持太低。

当前行为: 通缉行为:

那么有没有一种 CSS 方法可以解决这个问题(我不在乎它是否需要浏览器)？

Answer 1

我看不出您提供的两个示例之间有任何真正的区别。在这两种情况下，文本都已在表格中垂直居中。

如果我们垂直拉伸(stretch)表格单元格，您会看到文本垂直居中对齐:

它看起来不是那样的唯一原因是它上面有一个巨大的 table 。看这里:

这个表头只是在代码中有一个硬编码的高度:

<thead>
    <tr>
        <td  height="140px"></td>
    </tr>
</thead>

如果将其缩小到大约 10 像素或 20 像素，文本会变得更加居中。这就是你要问的吗？

如果您希望表格单元格 float 在表格其余部分的上方居中，您可以使用 CSS 来实现，但这可能不是一个好主意。我希望我了解您的需求并且希望这对您有所帮助。