* 請使用 Chrome 或是 Firefox 閱讀
在網頁中配置元素的相對位置不是件容易的事,CSS3 導入了方塊(Box)模型簡化了所需的設定步驟。考慮以下的淺灰色的方塊區域,在預設的情形下,黑色方塊配置於左上角的位置。
接下來的這個淺灰色的方塊區域,其中透過方塊模型的配置,將黑色方塊置中配置。
要實現如此的配置,只需將 display 設為 box ,然後進一步設定 pack 與 align 樣式為 center 即可,假設淺灰色的方塊區域為一 div 標籤,其 id="area" ,所需的設定如下:
除了 center ,還有 star 與 end 可以設定,請自行測試以檢視其效果。
請注意必須配置特定瀏覽器的識別字首。
* 請使用 Chrome 或是 Firefox 閱讀
在網頁中配置元素的相對位置不是件容易的事,CSS3 導入了方塊(Box)模型簡化了所需的設定步驟。考慮以下的淺灰色的方塊區域,在預設的情形下,黑色方塊配置於左上角的位置。
接下來的這個淺灰色的方塊區域,其中透過方塊模型的配置,將黑色方塊置中配置。
要實現如此的配置,只需將 display 設為 box ,然後進一步設定 pack 與 align 樣式為 center 即可,假設淺灰色的方塊區域為一 div 標籤,其 id="area" ,所需的設定如下:
#area{
display: -webkit-box ;
display: -moz-box ;
display: -ms-box ;
-webkit-box-align:center ;
-webkit-box-pack:center ;
-moz-box-align:center ;
-moz-box-pack:center ;
-ms-box-align:center ;
-ms-box-pack:center ;
}
除了 center ,還有 star 與 end 可以設定,請自行測試以檢視其效果。
請注意必須配置特定瀏覽器的識別字首。
* 請使用 Chrome 或是 Firefox 閱讀
沒有留言:
張貼留言