css 文字上下垂直向下

在CSS中，有许多方法可以控制文字的垂直对齐方式。今天我们将着重讨论一种在文本框、文本区域和其他块级元素中使文字上下垂直对齐的方法——line-height属性。

p {
  line-height: 1.5;
}

在上面的代码中，我们将p元素的行高设置为1.5。这意味着每一行文字的高度将扩展到1.5倍行高的高度。这也可以理解为，如果你把文字看作是放在一个框中的块级元素，那么每一行都将有与框本身高度一样的空间。

如果我们将行高设置为和元素的高度相同，就可以让文字垂直居中。

p {
  height: 50px;
  line-height: 50px;
}

以上代码的效果是：把p元素的高度设置为50像素，并将行高也设置为50像素。这样，由于每行文字的高度与框高度相同，所以文字将自动垂直居中。

值得注意的是，当使用不同的字体大小（font-size）时，需要重新调整行高以确保文字居中。

除了使用line-height属性，我们还可以使用vertical-align属性来控制垂直对齐方式。

p {
  display: table-cell;
  height: 200px;
  vertical-align: middle;
}

在这个例子中，我们将p元素的display属性设置为table-cell，这使得它表现得像一个表格单元格。然后，我们将其高度设置为200像素并使用vertical-align属性将文字垂直居中。

总之，使用CSS控制文字的垂直对齐方式可以让我们更好地控制网站的外观和排版，在设计精美的网站中发挥巨大的作用。