<td> 的行高是否与其高度相同？答案

【问题标题】：Does <td> have the same line-height as its height?<td> 的行高是否与其高度相同？
【发布时间】：2015-12-18 16:42:15
【问题描述】：

我正在尝试使文本在 div 内水平和垂直对齐。我有两种方法：

将 div 的 line-height 设置为与其高度相同的值：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				border: 1px solid;
				text-align: center;
				height: 400px;
				line-height: 400px;
			}
		</style>
	</head>
	<body>
		
		<div>This is the contents.</div>
		
	</body>
</html>

将 div 的显示更改为 table-cell：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				display: table-cell;
				border: 1px solid;
				width: 500px;
				height: 400px;
				text-align: center;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div><p>This is the contents.</p></div>
	</body>
</html>

这两种方法都有效。他们之间似乎有某种联系。而display: table-cell;则是让一个元素显示为<td>。所以我的问题是：<td> 的行高是否与其高度相同？

【问题讨论】：

TD 具有vertical-align 属性的特殊功能。这与行高无关。如果您在 P 中添加更多内容，请确保它开始换行，您会看到两种方法之间的巨大差异。
嗨@Pangloss，谢谢。所以你的意思是不是每个元素都有垂直对齐属性？我认为它适用于每个容器。
没错，它只适用于某些元素。这是一个非常令人困惑的属性。有时它适用于元素本身（即内联元素），有时它适用于内部元素/内容（即 TD）。我建议你谷歌“垂直对齐的工作原理”，并遵循一些详细的解释。
嗨@Pangloss，啊，我明白了。我刚刚找到了这个链接：developer.mozilla.org/en-US/docs/Web/CSS/vertical-align，上面写着“vertical-align CSS 属性指定内联或表格单元格框的垂直对齐方式。”这解释了一切，我想。非常感谢您的帮助！！！

标签： css vertical-alignment tablecell

【解决方案1】：

tl;dr：回答标题中的问题：不，表格单元格的行高与其高度不同。

_{当然，在某些情况下，它可以具有与行高相同的高度，但这不是您所要求的。}

然后是帖子本身的问题。
如果您确定内容是单行文本，那么解决方案 #1 是最简单的。您甚至不必设置 div 的高度；设置行高就够了。

div {
  border: 1px solid;
  text-align: center;
  line-height: 100px; /* acts the same with or without height:100px */
}

&lt;div&gt;This is the contents.&lt;/div&gt;

但是，如果内容可能包含多于一行，并且您希望保持相同的总高度，则不能使用line-height。 display:table-cell 是一种可能性，至少如果您还设置了vertical-align，正如您注意到的那样。（请参阅问题中的 sn-p #2。）

或者，您可以在 div 内添加一个额外的块元素，并使用定位将其放置在中间。

div {
  border: 1px solid;
  height: 100px;
  position:relative;
}
div p {
  margin:0;
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
}

&lt;div&gt;&lt;p&gt;This is the contents&lt;br&gt;and more contents.&lt;/p&gt;&lt;/div&gt;

关于表格单元格的另一个说明：请注意，实际表格单元格（

和）默认具有 vertical-align:middle，而其他元素（如

）具有 vertical-align:baseline。所以如果你给一个

display:table-cell，你也必须给它vertical-align:middle，否则它不会像一个真正的表格单元格那样表现。（设置一个属性不会自动更改其他属性。）

【讨论】：