css 解决方案-图片垂直居中

最新推荐文章于 2022-09-14 16:49:30 发布

编程之上

最新推荐文章于 2022-09-14 16:49:30 发布

阅读量1k

点赞数

分类专栏： css&css3

本文链接：https://blog.csdn.net/ruizhengyun/article/details/8681296

版权

css&css3 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS样式让图片垂直居中</title>
</head>
<style type="text/css">
*{
	margin:0; padding:0; 
	list-style-type:none;
	}
	a,img{
		border:0;
}
.wrapper{
	margin:0 auto; 
	width:1000px; 
}
.box{
	width:200px; height:200px;
	text-align:center; position:relative; 
	display:table-cell; vertical-align:middle;
	border:1px solid #ccc;
	}
	.box .b_img{
		*position:absolute; 
		top:50%; left:50%; 
		text-align:center;
	}
	.box .b_img img{
		*position:relative; 
		top:-50%; left:-50%; 
		border:1px solid #333;
}
</style>
<body>
<div class="wrapper">
	<div class="box">
		<div class="b_img">
			<a href="http://www.ruizhengyun.cn"><img width="150" height="150" alt="最珍贵年亲的心" src="https://img-my.csdn.net/uploads/201303/16/1363416871_1697.jpg" /></a>
		</div>
	</div>
</div>
</body>
</html>

编程之上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 解决方案-图片垂直居中

CSS样式让图片垂直居中*{ margin:0; padding:0; list-style-type:none; } a,img{ border:0;}.wrapper{ margin:0 auto; width:1000px; }.box{ width:200px; height:200px; text-align:center; position:rel
复制链接

扫一扫