W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
通過使用 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;
}
頁(yè)面底部有更多實(shí)例。
目前沒有瀏覽器支持 box-align 屬性。
Firefox 支持替代的 -moz-box-align 屬性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 屬性。
box-align 屬性規(guī)定如何對(duì)齊框的子元素。
默認(rèn)值: | stretch |
---|---|
繼承性: | no |
版本: | CSS3 |
JavaScript 語(yǔ)法: | object.style.boxAlign="center" |
box-align: start|end|center|baseline|stretch;
值 | 描述 | 測(cè)試 |
---|---|---|
start |
對(duì)于正常方向的框,每個(gè)子元素的上邊緣沿著框的頂邊放置。 對(duì)于反方向的框,每個(gè)子元素的下邊緣沿著框的底邊放置。 |
測(cè)試 |
end |
對(duì)于正常方向的框,每個(gè)子元素的下邊緣沿著框的底邊放置。 對(duì)于反方向的框,每個(gè)子元素的上邊緣沿著框的頂邊放置。 |
測(cè)試 |
center | 均等地分割多余的空間,一半位于子元素之上,另一半位于子元素之下。 | 測(cè)試 |
baseline | 如果 box-orient 是inline-axis或horizontal,所有子元素均與其基線對(duì)齊。 | 測(cè)試 |
stretch | 拉伸子元素以填充包含塊 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: