我们在应用图片的时候经常会碰到要让图片在容器里居中的情况,水平居中很简单直接给容器添加text-align: center;就ok了。那么垂直居中呢?是不是给img加vertical-align: middle;就可以了呢?

答案显然是否定的,单纯的给img加vertical-align: middle;并不能行,我平时用的比较多的办法有两种。

方法一:

<style type="text/css">
	body,p {
		margin: 0;
		padding: 0;
		}
	div {
		width: 300px;
		height: 300px;
		border: 1px solid #c6c6c6;
		margin: 50px auto;
		text-align: center;
		}
	a {
		display: inline-block;
		vertical-align: middle;
		}
	span {
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle; 
		}
	img {
		border: 1px solid #00f;
		}
	
</style>
</head>

<body>
<div>
    	<a href="#"><img src="images/img_03.jpg" /></a><span></span>
</div>
</body>

我的做法是添加一个空的span标签,然后给span标签设置成100%的高再让它居中,这样就能让a标签页同时居中。有些人会问你为啥要给img包a标签呢?实际应用中我们的图片经常都是需要可以被点击的跳转链接的。如果你的图片不需要被点击你也可以直接把vertical-align: middle; 加在img中。像这样

img {
		border: 1px solid #00f;
		vertical-align: middle;
		}
<div>
    	<img src="images/img_03.jpg" />
</div>

效果是一样的。
方法二:

div {
	position: relative;
    width: 100%;
    height: 238px;
}
img {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
<div>
    	<img src="images/img_03.jpg" /><span></span>
</div>

通过绝对定位,垂直和水平都居中了

方法三:

这个很简单,之间用 (div高 - 图片高) /2 然后设置margin-top 就ok了,但这么做不能够自适应,纯靠人工计算显得有点蠢。

下面是两种方法的实现效果图:

这里写图片描述


写得不对的地方欢迎交流指正,码字不易,拒绝未沟通情况下转载。CSDN博客:PromiseCao;



所有博客已转移至个人博客地址www.clramw.top

相关文章:css让图片自适应容器(div)大小

深度好文:清除浮动float的七种方法总结和兼容性处理

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐