CSS小案例3：鼠标滑过时给每个图片添加背景图 / 图片的垂直居中

最新推荐文章于 2024-02-12 17:10:51 发布

小佬呀

最新推荐文章于 2024-02-12 17:10:51 发布

阅读量232

点赞数

分类专栏： HTML 文章标签：图片垂直居中给图片添加背景图

本文链接：https://blog.csdn.net/qq_36722545/article/details/96897887

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先要让图片在每个div里垂直居中显示，有很多种方法，我这里用的是将div的属性值转为table-cell，这样使用text_align和vertical_align就可以实现图片的垂直居中。

效果图
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	   body{
	   border-spacing: 5px;
       margin-top: 50px;
       margin-left: 250px;
       border-top: 1px solid black;
	   }
		div{		
			height:100px;
			width: 100px;
			display: table-cell;	/*td的属性*/
			text-align: center;
			vertical-align: middle;	

		}
		div:hover{
			background: url(images/bg.png) no-repeat center ;		
		}
	</style>
</head>
	第一种方法：
<body>

    <div>
    	<img class="im" src="images/logo1.png">
    </div>
    	<div>
    	<img class="im" src="images/logo2.png">
    </div>
    <div>
    	<img class="im" src="images/logo3.png">
    </div>
    <div>
    	<img class="im" src="images/logo4.png">
    </div>
    <div>
    	<img class="im" src="images/logo5.png">
    </div>
    <div>
    	<img class="im" src="images/logo6.png">
    </div>
    <div>
    	<img class="im" src="images/logo7.png">
    </div>
    
</body>
</html>