CSS文字对齐属性（text-align、vertical-align和text-indent）

设置文本水平对齐方式时，可以使用 CSS 的 text-align 属性，其值包括：

left，左对齐；
center，水平居中对齐；
right，右对齐。

文本的垂直方向，不同的字体会有不同的设计，如基线、行高等。设置垂直对齐方式时使用 vertical-align 属性，其属性值包括：

baseline，基线对齐，这是默认值。
super，显示为上标。
sub，显示为下标。
top，顶部对齐。
middle，垂直居中对齐。
bottom，底部对齐。
text-top，文本顶部对齐。
text-bottom，文本底部对齐。

下面的代码将演示如何制作按钮效果，其中，文本在水平和垂直方向都使用居中对齐：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  .button_normal {
    width: 8em;
    text-align: center;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    background-color: steelblue;
    color: white;
  }
</style>
</head>
<body>
<div class="button_normal">按钮样式</div>
</body>
</html>

页面显示效果见下图：

中文文档中，一般会使用首行缩进 2 个字符的样式，此时可以使用 text-indent 属性设置，如下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  p {
    text-indent: 2em;
    line-height: 1.6em;
  }
</style>
</head>
<body>
<p>火星是太阳系八大行星之一，……</p>
<p>火星有两颗天然卫星：火卫一和火卫二，……</p>
<p>火星基本上是沙漠行星，地表沙丘、砾石、陨石遍布。……</p>
</body>
</html>

页面显示效果见下图：

CSS文字对齐属性（text-align、vertical-align和text-indent）

相关文章