很多時候網頁設計會用到文字配圖的排版,也會希望文字框及圖片可以垂直置中,例如下圖
接下來就要教各位如何在BUDA軟體使兩個子元素(col)框垂直置中
請先於空白網頁使用新增一個 100%寬度父元素 ,並於旁邊加上 row
(若選擇 95%寬度 以下父元素,請再加上 BUDA_W100P ←此元素是讓手機版版面滿版 )
接下來到進階並於樣式中輸入 margin:auto; ,按下確定
看到了嗎?畫面多出了一個灰色框,此框就是100%寬度父元素 BUDA_W100 ,接下來請於灰色框內按下三個enter鍵使框內多出三行空行
(小說明:「要有幾個子元素(col)就要再多加一行空行,方便以後編輯最外層的 BUDA_W100 ,所以假如我有兩個子元素,我就要2+1,空三行空行)
回到剛剛空下來的第一行,一樣按新增 COL(欄)-兩欄-子元素 ,並按下確定
父元素內就出現了剛剛我們下的子元素(橘色框)
再到父元素內,剛剛下的子元素旁邊,再新增一次子元素
我們就會得到兩個相同寬度的子元素框了
在框內增加您需要的內容,完成後有發現兩個框都是置頂的嗎?
那我要置中要怎麼做呢?還記得我們最開始空的三行空行嗎?現在我們要回到第三行空行並按下右鍵
按下右鍵之後選擇編輯Div
按下右鍵之後選擇編輯Div,請確認現在編輯的Div是 BUDA_W100 row 因為我們現在要編輯的是父元素
到進階的樣式裡再輸入 display:flex;align-items:center; 再按下確定
有發現了嗎?兩個子元素垂直置中了!恭喜你完成垂直置中的操作囉!
#垂直置中 #置中 #網頁區塊 #網頁修改 #查修網頁 #文字 #背景 #顏色 ##css
規格詳情歡迎觀看光速人軟體規格表