align的属性值有哪些：CSS中align属性的常见值及用法解析

在CSS布局中,align 并不是一个单一的属性，而是多个属性的统称，用于控制元素的对齐方式，常见的与 align 相关的属性包括 text-align、vertical-align、align-items、align-content、align-self 等，这些属性在网页布局中起着至关重要的作用，能够帮助开发者实现灵活且美观的页面设计。

下面我们将详细介绍这些属性的常见值及其用法：

text-align（文本对齐）

text-align 属性用于设置文本内容在容器中的水平对齐方式。

• left：文本左对齐（默认值）。
• center：文本居中对齐。
• right：文本右对齐。
• justify：文本两端对齐，使文本在行内均匀分布。

示例：

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

vertical-align（垂直对齐）

vertical-align 属性用于设置行内元素或表格单元格的垂直对齐方式。

• baseline：元素基线对齐（默认值）。
• top：元素顶部对齐。
• middle：元素中间对齐。
• bottom：元素底部对齐。
• text-top：元素顶部与父元素的文本顶部对齐。
• text-bottom：元素底部与父元素的文本底部对齐。
• sub：元素垂直对齐为上标。
• super：元素垂直对齐为下标。

示例：

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

align-items（Flex布局中的项目对齐）

在Flex布局中,align-items 属性用于设置Flex容器中项目在交叉轴上的对齐方式。

• stretch：项目被拉伸以填充容器（默认值）。
• flex-start：项目向交叉轴的起点对齐。
• flex-end：项目向交叉轴的终点对齐。
• center：项目居中对齐。
• baseline：项目按基线对齐。

示例：

.container {
  display: flex;
  align-items: center; /* 项目垂直居中对齐 */
}

align-content（Flex布局中的多行对齐）

当Flex容器有多行时,align-content 用于设置多行在交叉轴上的对齐方式。

• stretch：多行被均匀拉伸（默认值）。
• flex-start：多行向交叉轴的起点对齐。
• flex-end：多行向交叉轴的终点对齐。
• center：多行居中对齐。
• space-between：多行在交叉轴上均匀分布，两端对齐。
• space-around：多行在交叉轴上均匀分布，四周留白。

示例：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* 多行在交叉轴上均匀分布 */
}

align-self（单个项目对齐）

align-self 属性用于覆盖容器的 align-items 设置，单独设置某个项目的对齐方式。

• auto：继承容器的对齐方式（默认值）。
• flex-start：项目向交叉轴的起点对齐。
• flex-end：项目向交叉轴的终点对齐。
• center：项目居中对齐。
• stretch：项目拉伸以填充容器。
• baseline：项目按基线对齐。

示例：

.container {
  display: flex;
  align-items: stretch;
}
.item {
  align-self: center; /* 单独设置该项目居中对齐 */
}

object-fit（图片或视频的对齐与缩放）

object-fit 属性用于控制图片或视频在容器中的对齐方式和缩放方式。

• contain：保持宽高比例，完整显示内容，可能会留白。
• cover：保持宽高比例，覆盖容器，可能会裁剪内容。
• fill：填充容器，可能会拉伸内容。
• none：保持宽高比例，不缩放内容。
• auto：默认值，保持宽高比例。

示例：

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片覆盖容器，裁剪多余部分 */
}

align 相关的属性在CSS布局中非常常用，掌握它们的值和用法可以帮助开发者更灵活地控制元素的对齐方式，无论是文本、Flex项目，还是图片和视频，都可以通过这些属性实现精确的布局控制。

希望本文能帮助你更好地理解和使用 align 属性！