[問題] 文字長度不同如何RWD置中在區塊

看板Web_Design作者 (Adun)時間7年前 (2018/02/10 16:45), 編輯推噓2(204)
留言6則, 3人參與, 7年前最新討論串1/1
如題,目前在製作一個可以左右切換的選單按鈕,在頁面寬度夠的時候一行沒有問題... 但在不同裝置縮放時英文會斷行(寬度不同也可能右邊斷左邊不斷) Code如網址: http://jsbin.com/qukisuhudi/1/edit?html,css,output 問題是同時也要兼顧中文版文字(隨機播放/循序播放)維持文字內容的垂直置中,請教各位大大都如何處理這種狀況呢?感謝~~ ----- Sent from JPTT on my iPhone -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.140.2.5 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1518252315.A.5B7.html

02/10 23:03, 7年前 , 1F
在 label 加上 white-space: nowrap; 強制不換行
02/10 23:03, 1F

02/11 14:51, 7年前 , 2F
但英文字串太長了還是需要分兩行...有辦法讓他分兩行時
02/11 14:51, 2F

02/11 14:51, 7年前 , 3F
也同時是置中嗎...QQ
02/11 14:51, 3F

02/12 00:44, 7年前 , 4F
label也用flexbox然後置中
02/12 00:44, 4F

02/12 00:54, 7年前 , 5F
line-height拿掉
02/12 00:54, 5F

02/12 22:11, 7年前 , 6F
成功了!!!感謝小鳥大的解惑和ymc大大的幫忙~~
02/12 22:11, 6F
文章代碼(AID): #1QVh4RMt (Web_Design)
文章代碼(AID): #1QVh4RMt (Web_Design)