box-align
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
警告： 这是原始 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 属性被指定为下面列出的关键字值之一。
值
注意
为对齐目的而指定为起始的盒模型边缘取决于盒模型的方向
- 对于水平元素，起始是上边缘。
- 对于垂直元素，起始是左边缘。
与起始相对的边缘被指定为末尾。
如果使用元素的 align 属性设置对齐方式，则忽略样式。
正式定义
正式语法
box-align =
start |
center |
end |
baseline |
stretch
示例
设置盒模型对齐
html
<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>
css
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;
}
规范
不属于任何标准。
浏览器兼容性
加载中…