Question

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

将div的行高设置为与其高度相同的值：

<!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>与其高度具有相同的行高吗？

Answer 1

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

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

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

＆＃13;

<div>This is the contents.</div>

＆＃13;

line-height

＆＃13;

但是，如果内容可能包含多行，并且您希望保持相同的总高度，则无法使用display:table-cell。 vertical-align是一种可能性，至少如果你也设置了div { border: 1px solid; height: 100px; position:relative; } div p { margin:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }，就像你注意到的那样。（请参阅问题中的代码段＃2。）

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

＆＃13;

<div><p>This is the contents<br>and more contents.</p></div>

＆＃13;

vertical-align:middle

＆＃13;

关于表格单元格的另一个评论：请注意，真实表格单元格（＆lt; td＆gt;和＆lt; th＆gt;）默认为vertical-align:baseline，而其他元素如＆lt; div＆gt;有display:table-cell。所以如果你给＆lt; div＆gt; vertical-align:middle，你还必须给它int，否则它不会表现得像真正的表格单元格那样。（设置一个属性不会自动更改其他属性。）

是否与其高度具有相同的线高？

1 个答案: