欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)

程序员文章站 2022-04-24 21:47:11
...

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	div{
		width:180px;
		height:100px;		
		text-align:center;		
		background:#03C;
		float:left;
	}
	
	img{
		vertical-align:middle;
	}
	
	div span{
		height:100%;
		width:0px;
		overflow:hidden;
		display:inline-block;
		vertical-align:middle;
	}
</style>
</head>
	<div>
    	<img src="logo.png" /> <span></span>
    </div>
<body>
</body>
</html>
运行效果:

CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)

转载于:https://my.oschina.net/iamhere/blog/485910