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>

效果图如下:

 

 

 

展开阅读全文

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

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读