父元素高度为auto,子元素使用top:-50%没有效果的问题
无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效
后来查阅w3c看到这样一句话:
<percentage> 百分比
The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.
如果父元素的高度没有明确指定,top 的值跟设定为auto的效果是一样的 。
<div style="position: absolute; left: 50%;top:50%;border:1px solid green">
<div style="position: relative; left: -50%; top:-50%;border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
但是当指定特定值的时候就会有效果, height:36px;
<div style="position: absolute; left: 50%;top:50%;height:36px;border:1px solid green">
<div style="position: relative; left: -50%; top:-50%;border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
父元素高度为auto,子元素使用top:-50%没有效果的问题的更多相关文章
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...
- LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!
LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...
- [css]当父元素的margin-top碰上子元素的margin-top
出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...
- 【父元素parent】【子元素children】【同胞siblings】【过滤】
1.父元素 $("span").parent() //定位到span的父元素 $("span").parents() // ...
- CSS中如何设置父元素透明度不影响子元素透明度
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...
- 父元素相对定位后,子元素在ie下被覆盖的问题!
<div id="append_parent" style="position: relative;"> <div id="zoom ...
- 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...
- chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container"> <div class="item"> <div class="ite ...
随机推荐
- asp Eval()函数的一些使用总结
一.函数的原型: Eval(string s); s可以是变量,表达式,语句: 二.使用: 1.s为变量时,返回该变量的值,如:string s = "sss";Eval(s);/ ...
- hdu 1258 DFS
I - 深搜 基础 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:10000KB 64bi ...
- cxiamge 使用静态库 vs2010
首先下载cxiamge,我使用的是cxiamge_702 下载地址:http://download.csdn.net/detail/xing_ping_1987/8085129 编译静态库 新建项目, ...
- SQL中什么叫模式
模式(schema) 是 数据库体系结构中的一个节点对于 SQL Server 数据库来说.访问具体的一个表,可以由 4个部分组成分别为 服务器名, 数据库名,模式名,表名.对于访问本地的数据库因为 ...
- 关于viewWithTag的一点说明
通常我们使用viewWithTag如下情形: 如果我们用了一个父View,上面放了多个子view, 每个子view都通过从0开始的Tag值来进行标志,以便于后期在像View上直接使用viewWithT ...
- 开心菜鸟系列----变量的解读(javascript入门篇)
console.info( console.info(window['weiwu']) console.info(window. ...
- javascript----bug
JSON.parse(null)------------某些手机浏览器不支持.
- LeetCode_Set Matrix Zeroes
Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. 很挫的一个想 ...
- LeetCode_Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Windows下AndroidStudio 中使用Git(AndroidStudio项目于GitHub关联)
前提条件 : 1. 安装 Git 客户端 下载链接 2. 有 GitHub 账号 (假设你已经有了一些git基础, 如果还一点都不会, 请去找其他加成学习) AndroidStudio项目发布到Git ...