作者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/cn.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