纯 CSS 对齐形式

CSS 可以通过各种属性来实现元素的对齐，包括但不限于：

• text-align：对齐文本内容；
• vertical-align：对齐行内元素；
• margin：对齐块级元素间的空间；
• padding：对齐元素内部的内容；

以下是一些实例和介绍。

对齐文本内容

通过 text-align 属性可以对齐文本内容的位置。

.center {
  text-align: center;
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}

通过上述代码可以实现将文本内容分别对齐到中间、右边和左边。

对齐行内元素

通过 vertical-align 属性可以实现对行内元素（如图片、表格单元格）的垂直对齐。

.middle {
  vertical-align: middle;
}
.top {
  vertical-align: top;
}
.bottom {
  vertical-align: bottom;
}

通过上述代码可以实现将行内元素分别垂直对齐到中间、顶部和底部。

对齐块级元素间的空间

通过 margin 属性可以控制块级元素之间的关系，包括：

• margin-top：元素上边缘与上一个元素下边缘之间的距离；
• margin-right：元素右边缘与右边元素左边缘之间的距离；
• margin-bottom：元素下边缘与下一个元素上边缘之间的距离；
• margin-left：元素左边缘与左边元素右边缘之间的距离；

.vertical {
  margin-top: 10px;
  margin-bottom: 10px;
}
.horizontal {
  margin-left: 10px;
  margin-right: 10px;
}

通过上述代码可以实现横向和纵向上的元素间距离均为 10 像素。

对齐元素内部的内容

通过 padding 属性可以控制块级元素内部内容的位置和大小关系，包括：

• padding-top：内容区域上边缘与元素边缘之间的距离；
• padding-right：内容区域右边缘与元素边缘之间的距离；
• padding-bottom：内容区域下边缘与元素边缘之间的距离；
• padding-left：内容区域左边缘与元素边缘之间的距离；

.padding {
  padding: 10px;
}

通过上述代码可以实现元素内部的内容沿着元素边缘向内缩进 10 像素的效果。

以上是一些常见的纯 CSS 对齐形式介绍。