任务不会做
1、为什么要用绝对定位
2、为什么是给table设置css样式而不是给td设置,div的父元素难道不是td?讲解里也是给td设置cs样式而不是给table,为什么任务里给td设置就没用?
1、为什么要用绝对定位
2、为什么是给table设置css样式而不是给td设置,div的父元素难道不是td?讲解里也是给td设置cs样式而不是给table,为什么任务里给td设置就没用?
2016-09-30
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc;float:left;}
.mid{
border:red solid 1px;
}
.img_middle{border:green solid;position:absolute;height:100%;}
</style>
</head>
<body>
<table class="wrap"><tbody><tr><td >
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<!--下面是代码任务区-->
<table class="img_middle"><tbody><tr><td><div class="mid">
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td></tr></tbody></table>
</body>
</html>
找了半天。。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc;float:left;}<!--想让图片相对浏览器对中,就不能让wrap影响到imc-middle,将它设为float或者absolute。-->
.mid{
border:red solid 1px;
}
.imc-middle{border:green solid;position:absolute;height:100%;}<!--将定位基准设为浏览器窗口,并且获取浏览器高度,不用设置vertical-align,因为td自己会在table里对中-->
</style>
</head>
<body>
<table><tbody><tr><td >
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<!--下面是代码任务区-->
<table><tbody><tr><td><div>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td></tr></tbody></table>
</body>
</html>
完美~~~
举报