图片垂直水平居中的N种方法

最新推荐文章于 2021-08-04 10:12:17 发布

show_code

最新推荐文章于 2021-08-04 10:12:17 发布

阅读量5.6k

点赞数

分类专栏： Web前端文章标签： css 居中图片垂直居中

本文链接：https://blog.csdn.net/playboyanta123/article/details/39899717

版权

Web前端专栏收录该内容

74 篇文章 3 订阅

订阅专栏

前几天在网上逛博客，看到一个关于在div中图片居中的几种方法的帖子，当然博主原意不是讲这个的，而是再说明css的几个display属性的用法以及伪类：after的巧用过程中展示的用例，当然还有意想不到的font-size属性的用法，个人觉得非常有用，所以就做了一个总结，在一个div容器中让图片水平垂直居中有以下N中方法，当然不限于以下方法（以下方法兼容IE系列以及W3C浏览器）：

<style>
		*{padding: 0; margin: 0; list-style: none;}
		/*方案1*/
		.bg-box{width: 144px;height: 144px;font-size:118px;border: 1px solid #ddd;float: left;margin-right: 20px;}
		.bg-box .img-src{background: url(logo.png) no-repeat center center;display: block;width: 100%;height: 100%;}
		/*方案2*/
		.wrap-box{float: left;margin-right: 20px;}
		.img-box{width: 144px;height: 144px;*font-size:118px;vertical-align:middle;display:table-cell;border: 1px solid #ddd;text-align: center;}/*height:fontSize=1.14*/
		.img-box img{vertical-align: middle;}
		/*方案3*/
		.img-box1{width: 144px;height: 144px;font-size:0;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;}
		.img-box1 .pixel{vertical-align: middle;height: 100%;width: 1px;}
		.img-box1 .img-src{vertical-align: middle;}
		/*方案4*/
		.img-box2{width: 144px;height: 144px;*font-size:118px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;}
		.img-box2:after{content: '';display: inline-block;height: 100%;width: 0;vertical-align: middle;}
		.img-box2 .img-src{vertical-align: middle;}
		/*方案5*/
		.img-box3{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;}
		.img-divide{width:0;height:100%;display:inline-block;vertical-align:middle;*display:inline;*zoom:1;}
		.img-box3 .img-src{vertical-align:middle;}
</style>
</head>
<body>
	<div class="bg-box">
		<img src="pixel.png" alt="" class="img-src">
	</div>
	<div class="wrap-box">
		<div class="img-box">
			<img src="logo.png" alt="">
		</div>
	</div>
	<div class="img-box1">
		<img src="pixel.png" alt="" class="pixel">
		<img src="logo.png" alt="" class="img-src">
	</div>
	<div class="img-box2">
		<img src="logo.png" alt="" class="img-src">
	</div>
	<div class="img-box3">
		<div class="img-divide"></div>
		<img src="logo.png" class="img-src">
	</div>
</body>

一下是效果图：

//无意间又发现一种方法，这里再补充一下

用line-height就能达到这样的效果，如下：

.img-box4{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;line-height:144px;}
.img-box4 .img-src{vertical-align:middle;}

说明下，logo.png是效果图中的图片，而pixel.png是一张大小随意的透明图片，大家可以试试效果！

PS：推荐使用最后一种，省了很多麻烦！

show_code

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
图片垂直水平居中的N种方法

div内容水平垂直居中解决方案
复制链接

扫一扫

专栏目录