html - 如何在中间设置文本（水平和垂直）？

Question

在此处输入图像描述

这是我的 html 和 css

<div id="name">
<p>TEST TEST TEXT</p>
</div>

#name{
  width: 200px;
  height: 50px;
  background: #019fde;
  border-radius: 10px;
}

如何在中间设置文本（水平和垂直）？

score 2 · Accepted Answer

如果它只是一条线，您可以使用line-height. 设置line-height为与元素相同的高度（在本例中为 50px），您的文本将位于中间。

要居中对齐文本，只需使用text-align:center;

score 1 · Accepted Answer

这将做到：

  text-align: center;
  display: table-cell;
  vertical-align: middle;

score 0 · Accepted Answer

您也不必费心将pa包裹起来div，只需p在顶部和底部为标签提供一致的填充，这将在设置text-align:center.

3 回答 3