[問題] min-height 遇到垂直置中text

看板Web_Design作者 (老子我最神)時間10年前 (2015/05/18 23:21), 10年前編輯推噓5(5推 0噓 20→)
留言25則, 7人參與, 最新討論串1/1
Hi, 今天改CSS時遇到問題 我要在 min-height 裡面設定垂直置中，發現設定會無效 後來有看到 http://goo.gl/PvbeNL 測試後的確是可以垂直置中，But 有一個地方不知道怎麼修改 這是我的 JsFiddle 測試: https://jsfiddle.net/83azL9bw/1/ 寬度不一樣... 已經知道是因為最頂層的 a tag 造成的 在第一個例子裡面 content 因為有值，所以寬度會是 80*2 + 3*2 + 108 但是設定成container之後，content沒有值，寬度會變為 80*2 + 3*2 已經知道原因，但是... 不會改... 小弟能力想不出比較正當的改法... 目前不能動 cm1，其他都可以改 有大大有解法嗎? 提供給我參考一下 感謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.193.192.133 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1431962473.A.37E.html
→
05/18 23:44, , 1F
看不懂你要的呈現到底是第一個還是第二個...cm1不能動是說
05/18 23:44, 1F
→
05/18 23:45, , 2F
html一定要包這層還是樣式也不能動？還有為何不用table-cell
05/18 23:45, 2F
→
05/18 23:49, , 3F
我希望有第一個的寬度，有第二個得置中效果
05/18 23:49, 3F
→
05/18 23:52, , 4F
一定要有cm1樣式。cm1樣式不能動，可以額外新增 style
05/18 23:52, 4F
→
05/19 00:16, , 5F
.container 設寬度 還有用table-cell比較簡單
05/19 00:16, 5F
推
05/19 01:17, , 6F
Top: 50%; translateY(-50%); 有時候會用的奇怪方法
05/19 01:17, 6F
推
05/19 01:19, , 7F
不過既然只是文字，為什麼不用padding就好
05/19 01:19, 7F
我說一下原因 我們整個網站是RWD，且每一個 class 在眾多頁面都有使用 而我只是改某個頁面的某個小地方 而這個頁面也會被多個功能使用到 所以我不能直接改動原先的 class，否則有可能造成網頁跑版 我也不想為了這個小地方而完全重寫新的 class，因為相同東西就用相同class就好 例如藍色按鈕是 <a class="button blueSt"> 那麼我寫一個紅色按鈕就會是 <a class="button redSt"> 不會整個重寫變成 <a class="myRedBotton"> 再加上整個網站開發過程我沒參與 所以就算我覺得這 class 寫得不好，我也不敢改， 天曉得原先的 class 設定是為了甚麼而加上 min-heigh 屬性... 另外一問，為什麼 table cell 會比較好寫? 有點看不懂推文
→
05/19 02:28, , 8F
.cm1:not(.container) { 這樣呢？
05/19 02:28, 8F
這個可以，不過我不知道要怎麼設定屬性才會變為我的預期結果XD
→
05/19 02:29, , 9F
支援度不論，非選擇器理論上是css正式規範拉...
05/19 02:29, 9F
※ 編輯: cyclone350 (123.193.192.133), 05/19/2015 21:47:45
→
05/19 23:20, , 10F
還是不懂為何要搞這麼複雜？照程式碼看來只要沒 min-height
05/19 23:20, 10F
→
05/19 23:21, , 11F
就可以垂直置中，那你在你要垂直置中的按鈕上多加一個 class
05/19 23:21, 11F
→
05/19 23:22, , 12F
像 v-middle 之類，再設 .cm1.v-middle {min-height:0;}
05/19 23:22, 12F
→
05/19 23:22, , 13F
不就解決了＠＠
05/19 23:22, 13F
→
05/19 23:44, , 14F
因為文字可能只有一行，會小於 min-height。
05/19 23:44, 14F
→
05/19 23:45, , 15F
可以加 v-middle，但是這樣就要掃過全部網頁，讓所有
05/19 23:45, 15F
→
05/19 23:46, , 16F
有cm1的class都再加上v-middle
05/19 23:46, 16F
→
05/19 23:51, , 17F
v-middle 搞錯意思了XD。
05/19 23:51, 17F
→
05/19 23:52, , 18F
無法設定min-height為0，因為Button文字可能會小於min
05/19 23:52, 18F
→
05/20 00:56, , 19F
不就是因為文字可能小於min-height才需要這樣的...= =;;
05/20 00:56, 19F
推
05/21 07:19, , 20F
05/21 07:19, 20F
→
05/21 07:34, , 21F
原諒我新手 這樣沒有RWD...
05/21 07:34, 21F
→
05/21 08:11, , 22F
jsfiddle.net/83azL9bw/4/ 看能不能改成只更新元件...
05/21 08:11, 22F
其實現在就是用這方法解的 XD 不過個人有點不喜歡，感覺有點繞 ~ ※ 編輯: cyclone350 (123.193.192.133), 05/21/2015 23:01:18
推
05/25 00:38, , 23F
05/25 00:38, 23F
→
05/25 00:39, , 24F
不過 我覺得整個改掉比較好
05/25 00:39, 24F
推
06/03 14:36, , 25F
連結不是就<a>而已？
06/03 14:36, 25F
‣ 更多 cyclone350 的文章
文章代碼(AID): #1LMWDfD- (Web_Design)