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> ```