如何将图片相对浏览器垂直居中，没有看懂？
如何将图片相对浏览器垂直居中，没有看懂？
qq_joshuahuhao_0
2018-05-06
5 回答
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.qwer{
display:table-cell;
height:500px;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="qwer">
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>其实小白学这些知识的时候不需要了解原理，只要你知道有这么个用法就行，等你用多了，你就会明白了，程序员就是要多敲代码，光看是学不好的
查看2条回复
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<!--下面是代码任务区-->
<table><tbody><tr><td class="wrap">
<div>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td></tr></tbody></table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style type="text/css">
table{
vertical-align:middle;
height:500px;
}
</style>
</head>
<body>
<div>
<table style="border:1px solid red">
<tbody>
<tr><td>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
.ts{
/*
表绝对定位
大小与窗口一致
*/
position:absolute;
top:0px;
width:100%;
height:100%;
background:red;
}
.cen{
vertical-align:middle;
}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<!--下面是代码任务区-->
<table class="ts">
<tbody>
<tr>
<td class="cen">
<div>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
举报
0/150
提交
取消
