HTML页面,图片img在容器DIV中,上下左右居中(实用技能,css的table-cell)

效果图如下:


代码及样式:

<html>
<head>
	<title>百搭屋</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<style>
		
		.table {
		  display: table;
		  table-layout: fixed;
		  width: 500px;height: 500px;border: 1px solid red;
		  background:#F0F0F0;
		}
		.table-cell {
		  display: table-cell;
		  text-align: center;
		  vertical-align: middle;
		}
	</style>
</head>

<body>
	<div style="" class="table">
		<div class="table-cell">
			<img style="max-width:500px;max-height:500px;" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=1111114400,1524974545&fm=85&s=BF80E901FF975FC60A8DD4D60300E0F0">
		</div>	  
	</div>
 </body>
</html>



阅读更多

没有更多推荐了,返回首页