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;
}
規範
不屬於任何標準。
瀏覽器相容性
載入中…