关闭

图片水平垂直居中对齐的四种做法

时间: 2018-03-04阅读: 159标签: 对齐

前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,本文分享我用的四种方法,希望对你有所启发。

<div>
<img src="http://dummyimage.com/200x200/f66/"/>
</div>
.img {
	width:300px;
	height:300px;
	margin:20px auto;
	background:#00f;
}


1.绝对定位+margin:auto

利用图片相对于外层浮动,加上margin:auto.

<div>
<img src="http://dummyimage.com/200x200/f66/"/>
</div>
.img1 {
	position:relative;
}
.img1 img {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}


2.flexbox

利用flexbox里面的垂直居中属性:align-items:center(垂直居中)和justify-content:center(水平居中);

<div>
	<img src="http://dummyimage.com/200x200/f66/"/>
</div>
.img2 {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex-box;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	text-align:center;
}


3.table-cell

利用display:table-cell+图片vertical-align:middle

<div>
	<span><img src="http://dummyimage.com/200x200/f66/"/></span>
</div>
.img3 .icenter {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	height:300px;
	width:300px
}
.img3 img {
	vertical-align:middle;
	display:inline-block
}


4.增加一个空白标签

兼容性较好,支持IE浏览器

<div>
	<img src="http://dummyimage.com/200x200/f66/"/>
	<i></i>
</div>
.img4 {
	text-align:center
}
.img4 img {
	vertical-align:middle
}
.img4 .iblock {
	display:inline-block;
	height:100%;
	width:0;
	vertical-align:middle
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/10185

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!