[问题] min-height 遇到垂直置中text

楼主: cyclone350 (老子我最神)   2015-05-18 23:21:09
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,其他都可以改
有大大有解法吗? 提供给我参考一下
感谢
作者: miau (米奥)   2015-05-18 23:44:00
看不懂你要的呈现到底是第一个还是第二个...cm1不能动是说html一定要包这层还是样式也不能动?还有为何不用table-cell
楼主: cyclone350 (老子我最神)   2015-05-18 23:49:00
我希望有第一个的宽度,有第二个得置中效果一定要有cm1样式。cm1样式不能动,可以额外新增 style
作者: iceblue7x (满城尽带路人甲)   2015-05-19 00:16:00
.container 设宽度 还有用table-cell比较简单
作者: aspdoctor (大崎)   2015-05-19 01:17:00
Top: 50%; translateY(-50%); 有时候会用的奇怪方法不过既然只是文字,为什么不用padding就好
作者: mmis1000 (秋月恋枫)   2015-05-19 02:28:00
.cm1:not(.container) { 这样呢?支援度不论,非选择器理论上是css正式规范拉...
作者: miau (米奥)   2015-05-19 23:20:00
还是不懂为何要搞这么复杂?照程式码看来只要没 min-height就可以垂直置中,那你在你要垂直置中的按钮上多加一个 class像 v-middle 之类,再设 .cm1.v-middle {min-height:0;}不就解决了@@
楼主: cyclone350 (老子我最神)   2015-05-19 23:44:00
因为文字可能只有一行,会小于 min-height。可以加 v-middle,但是这样就要扫过全部网页,让所有有cm1的class都再加上v-middlev-middle 搞错意思了XD。无法设定min-height为0,因为Button文字可能会小于min
作者: miau (米奥)   2015-05-20 00:56:00
不就是因为文字可能小于min-height才需要这样的...= =;;
作者: pzyc79   2015-05-21 07:19:00
jquery暴力解? https://jsfiddle.net/83azL9bw/3/原谅我新手 这样没有RWD...jsfiddle.net/83azL9bw/4/ 看能不能改成只更新元件...
作者: eight0 (欸XD)   2015-05-25 00:38:00
https://jsfiddle.net/83azL9bw/5/不过 我觉得整个改掉比较好
作者: mmis1000 (秋月恋枫)   2015-06-03 14:36:00
连结不是就<a>而已?

Links booklink

Contact Us: admin [ a t ] ucptt.com