CSS3 box-align 屬性 · W3School CSS 參考手冊

# CSS3 box-align 屬性 ## 實例通過使用 box-align and box-pack 屬性，居中 div 框的子元素： ``` div { width:350px; height:100px; border:1px solid black; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } ``` 頁面底部有更多實例。 ## 瀏覽器支持目前沒有瀏覽器支持 box-align 屬性。 Firefox 支持替代的 -moz-box-align 屬性。 Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 屬性。 ## 定義和用法 box-align 屬性規定如何對齊框的子元素。 | 默認值： | stretch | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.boxAlign="center" | | --- | --- | ## 語法 ``` box-align: start|end|center|baseline|stretch; ``` | 值 | 描述 | 測試 | | --- | --- | --- | | start | 對于正常方向的框，每個子元素的上邊緣沿著框的頂邊放置。對于反方向的框，每個子元素的下邊緣沿著框的底邊放置。 | [測試](/tiy/c.asp?f=css_box-align) | | end | 對于正常方向的框，每個子元素的下邊緣沿著框的底邊放置。對于反方向的框，每個子元素的上邊緣沿著框的頂邊放置。 | [測試](/tiy/c.asp?f=css_box-align&p=2) | | center | 均等地分割多余的空間，一半位于子元素之上，另一半位于子元素之下。 | [測試](/tiy/c.asp?f=css_box-align&p=3) | | baseline | 如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊。 | [測試](/tiy/c.asp?f=css_box-align&p=4) | | stretch | 拉伸子元素以填充包含塊 | ## 親自試一試 - 實例 [改變元素的 box-align 值](/tiy/t.asp?f=css3_box-align_js) 該例演示如何使用 JavaScript 來改變元素的 box-align 值。 ``` <!DOCTYPE html> <html> <head> <style> .box { display:-moz-box; display:-webkit-box; display:box; width:200px; height:100px; border:2px solid red; } </style> <script> function ChangeBoxAlign(x) { // Returns the selected option's text var boxAlign=x.options[x.selectedIndex].text; var div=document.getElementById("myDiv"); if (div.style.MozBoxAlign!==undefined) { div.style.MozBoxAlign=boxAlign; } else if (div.style.webkitBoxAlign!==undefined) { div.style.webkitBoxAlign=boxAlign; } else { alert("Your browser doesn't support this example!"); } } </script> </head> <body> <div class="box" id="myDiv"> <b>第一個子元素</b> <i>第二個子元素</i> </div> <select onchange="ChangeBoxAlign (this);" size="6"> <option selected="selected" />baseline <option />center <option />end <option />inherit <option />start <option />stretch </select> <p><b>注釋：</b>本例在 Internet Explorer 和 Opera 中無效。</p> </body> </html> ```