作者cyclone350 (老子我最神)
看板Web_Design
標題[問題] min-height 遇到垂直置中text
時間Mon May 18 23:21:09 2015
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1431962473.A.37E.html
1F：→ miau: 看不懂你要的呈現到底是第一個還是第二個...cm1不能動是說 05/18 23:44
2F：→ miau: html一定要包這層還是樣式也不能動？還有為何不用table-cell 05/18 23:45
3F：→ cyclone350: 我希望有第一個的寬度，有第二個得置中效果 05/18 23:49
4F：→ cyclone350: 一定要有cm1樣式。cm1樣式不能動，可以額外新增 style 05/18 23:52
5F：→ iceblue7x: .container 設寬度 還有用table-cell比較簡單 05/19 00:16
6F：推 aspdoctor: Top: 50%; translateY(-50%); 有時候會用的奇怪方法 05/19 01:17
7F：推 aspdoctor: 不過既然只是文字，為什麼不用padding就好 05/19 01:19
我說一下原因
我們整個網站是RWD，且每一個 class 在眾多頁面都有使用
而我只是改某個頁面的某個小地方
而這個頁面也會被多個功能使用到
所以我不能直接改動原先的 class，否則有可能造成網頁跑版
我也不想為了這個小地方而完全重寫新的 class，因為相同東西就用相同class就好
例如藍色按鈕是 <a class="button blueSt">
那麼我寫一個紅色按鈕就會是 <a class="button redSt">
不會整個重寫變成 <a class="myRedBotton">
再加上整個網站開發過程我沒參與
所以就算我覺得這 class 寫得不好，我也不敢改，
天曉得原先的 class 設定是為了甚麼而加上 min-heigh 屬性...
另外一問，為什麼 table cell 會比較好寫? 有點看不懂推文
8F：→ mmis1000: .cm1:not(.container) { 這樣呢？ 05/19 02:28
這個可以，不過我不知道要怎麼設定屬性才會變為我的預期結果XD
9F：→ mmis1000: 支援度不論，非選擇器理論上是css正式規範拉... 05/19 02:29
※ 編輯: cyclone350 (123.193.192.133), 05/19/2015 21:47:45
10F：→ miau: 還是不懂為何要搞這麼複雜？照程式碼看來只要沒 min-height 05/19 23:20
11F：→ miau: 就可以垂直置中，那你在你要垂直置中的按鈕上多加一個 class 05/19 23:21
12F：→ miau: 像 v-middle 之類，再設 .cm1.v-middle {min-height:0;} 05/19 23:22
13F：→ miau: 不就解決了＠＠ 05/19 23:22
14F：→ cyclone350: 因為文字可能只有一行，會小於 min-height。 05/19 23:44
15F：→ cyclone350: 可以加 v-middle，但是這樣就要掃過全部網頁，讓所有 05/19 23:45
16F：→ cyclone350: 有cm1的class都再加上v-middle 05/19 23:46
17F：→ cyclone350: v-middle 搞錯意思了XD。 05/19 23:51
18F：→ cyclone350: 無法設定min-height為0，因為Button文字可能會小於min 05/19 23:52
19F：→ miau: 不就是因為文字可能小於min-height才需要這樣的...= =;; 05/20 00:56
21F：→ pzyc79: 原諒我新手 這樣沒有RWD... 05/21 07:34
22F：→ pzyc79: jsfiddle.net/83azL9bw/4/ 看能不能改成只更新元件... 05/21 08:11
其實現在就是用這方法解的 XD
不過個人有點不喜歡，感覺有點繞 ~
※ 編輯: cyclone350 (123.193.192.133), 05/21/2015 23:01:18
24F：→ eight0: 不過 我覺得整個改掉比較好 05/25 00:39
25F：推 mmis1000: 連結不是就<a>而已？ 06/03 14:36