box-align

非标准：此功能是非标准的，并且不在标准化轨道上。不要在面向 Web 的生产网站上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为在将来可能会改变。

已弃用：此功能不再推荐。尽管一些浏览器可能仍然支持它，但它可能已被从相关的 Web 标准中删除，或者正在被删除，或者可能只是为了兼容性目的而保留。避免使用它，如果可能，更新现有代码；请查看此页面底部的兼容性表，以指导您的决策。请注意，此功能可能随时停止工作。

警告：这是原始 CSS 弹性盒子布局模块草案中的属性，已被更新的标准取代。

**box-align** CSS 属性指定元素如何在其布局中沿垂直方向对齐其内容。该属性的效果只有在盒子中存在额外空间时才可见。

有关当前标准的信息，请参阅 flexbox。

布局方向取决于元素的方向：水平或垂直。

语法

css

/* Keyword values */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

box-align 属性指定为以下列出的关键字值之一。

值

start: 盒子将内容对齐到开头，将任何额外的空间留在结尾。
center: 盒子将内容对齐到中心，将任何额外的空间平均分配到开头和结尾。
end: 盒子将内容对齐到结尾，将任何额外的空间留在开头。
baseline: 盒子将内容的基线对齐（使文本对齐）。这仅适用于盒子的方向为水平。
stretch: 盒子拉伸内容，以便盒子里没有额外空间。

备注

用于对齐的盒子的指定开始边缘取决于盒子的方向。

对于水平元素，开始是顶部边缘。
对于垂直元素，开始是左侧边缘。

与开始相对的边缘指定为结束。

如果对齐使用元素的align属性设置，则忽略样式。

正式定义

初始值	`stretch`
应用于	具有 CSS `display` 值为 `box` 或 `inline-box` 的元素
继承	否
计算值	如指定
动画类型	离散

正式语法

box-align =
  start | center | end | baseline | stretch

示例

设置盒子对齐

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-align example</title>
    <style>
      div.example {
        display: box; /* As specified */
        display: -moz-box; /* Mozilla */
        display: -webkit-box; /* WebKit */

        /* Make this box taller than the children,
     so there is room for the box-pack */
        height: 400px;

        /* Make this box wider than the children
     so there is room for the box-align */
        width: 300px;

        /* Children should be oriented vertically */
        box-orient: vertical; /* As specified */
        -moz-box-orient: vertical; /* Mozilla */
        -webkit-box-orient: vertical; /* WebKit */

        /* Align children to the horizontal center of this box */
        box-align: center; /* As specified */
        -moz-box-align: center; /* Mozilla */
        -webkit-box-align: center; /* WebKit */

        /* Pack children to the bottom of this box */
        box-pack: end; /* As specified */
        -moz-box-pack: end; /* Mozilla */
        -webkit-box-pack: end; /* WebKit */
      }

      div.example > p {
        /* Make children narrower than their parent,
     so there is room for the box-align */
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>
        I will be second from the bottom of div.example, centered horizontally.
      </p>
      <p>I will be on the bottom of div.example, centered horizontally.</p>
    </div>
  </body>
</html>

规范

不是任何标准的一部分。

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

align-items、box-orient、box-direction、box-pack