html – CSS – 保证金最高50%超过50%
我想要一个通过百分比的op-margin的子div. y位置应为父div的50%.但它在某种程度上更多.为什么不是50%?
js fiddle HTML <div class="content"> <header></header> </div> CSS .content { width: 300px; height: 200px; background: blue; position: relative; clear: both; } .content header { width: 100px; height: 100px; margin-top: 50%; background: red; position: relative; float: left; } 解决方法
这是因为当以百分比形式显示顶部/底部边距和填充时,这些值将被视为父元素的小数宽度,而不是高度.根据
W3C definition:
此问题之前已在StackOverflow – see here中得到解决. 建议:如果要将元素垂直放置在中心,可以使用以下技巧: >绝对定位子元素 这是你的小提琴中修改过的CSS有效: .content header { width: 100px; height: 100px; top: 50%; background: red; position: absolute; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } http://jsfiddle.net/teddyrised/73xkT/7/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |