文本对齐和行高的设置-编程入门课：CSS(3)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：CSS(3)从入门到实战

CSS中文本对齐和行高的设置是非常常见和重要的样式属性。文本对齐是指调整文本在容器中水平和垂直方向上的位置，行高则是指每一行文本的高度。在本文中，将介绍CSS中文本对齐和行高的设置方法，并且结合代码示例讲解。

水平对齐
在CSS中，可以使用text-align属性设置文本在容器中的水平对齐方式。text-align属性可以接受多个值，包括left、center、right、justify等。以下是一些常用的水平对齐示例：

```
这是左对齐的文本
这是居中对齐的文本
这是右对齐的文本
这是两端对齐的文本，每行的末尾都对齐
```
垂直对齐
在CSS中，可以使用vertical-align属性设置文本在容器中的垂直对齐方式。vertical-align属性可以接受多个值，包括top、middle、bottom等。以下是一些常用的垂直对齐示例：

```
<div style="height: 100px; line-height: 100px;">
 这是顶部对齐的文本
 这是垂直居中对齐的文本
 这是底部对齐的文本
</div>
```
需要注意的是，vertical-align属性对于不同的元素表现不同。对于行内元素，vertical-align可以设置为top、middle、bottom等；对于块级元素，vertical-align只能设置为baseline。

行高
在CSS中，可以使用line-height属性设置文本行高。line-height属性可以接受多个单位，包括px、em、%等。以下是一些常用的行高示例：
```
这是行高为1.5倍字体大小的文本
这是行高为2倍字体大小的文本
这是行高为200%的文本
```
需要注意的是，line-height属性还可以设置为normal。当设置为normal时，行高会自动根据字体大小来调整。

多行文本对齐
对于多行文本，在CSS中可以使用text-align属性和line-height属性来实现对齐效果。以下是一个多行文本对齐的示例：

```
<div style="width: 200px; height: 100px; border: 1px solid #ccc; overflow: hidden">

这是一段多行文本。这是一段多行文本。这是一段多行文本。这是一段多行文本。
 这是一段多行文本。这是一段多行文本。这是一段多行文本。这是一段多行文本。
 
</div>
```
在上面的示例中，使用了text-align属性将文本两端对齐，并使用line-height属性设置行高为1.5倍字体大小，使得文本更加紧凑。同时，为了保证文本不会溢出容器，使用了overflow:hidden 属性将多余的文本隐藏起来。

小结
CSS中的文本对齐和行高的设置是非常常见和重要的样式属性，通过设置这些属性可以让文本更加美观和易于阅读。在本文中，介绍了CSS中文本对齐和行高的设置方法，并且结合了代码示例进行讲解。希望读者通过本文的学习，能够更好地掌握CSS中文本对齐和行高的使用。

该分类下的相关小册推荐：

编程入门课：HTML(5)从入门到实战