[HTML] [原创]  CSS 使图片在div容器中水平居中并垂直居中

有的时候制作网页,需要让一张不固定大小的图片在固定大小的容器中居中。先看以下代码:

HTML代码

<div style="background-color:#ABABAB;width:400px;height:400px;">
	<img src="http://www.qwqoffice.com/images/icon.png" width="300" height="300">
</div>


div容器大小为400*400,里面的图片大小为300*300。为了能看清楚,我把容器加上了背景颜色。

这时候我们先让图片水平居中,很简单,只需在容器加上CSS样式:text-align:center 。


接下来是垂直居中。在CSS中也有一个属性:vertical-align。但是设置后发现并没有效果。这是因为这个属性只对行内元素有效,对块级元素无效。这时需要用特殊的方法使它垂直居中。

在图片后加上一个span标签,并赋予vertical-middle类。图片赋予img类。如下:

HTML代码

<div style="background-color:#ABABAB;width:400px;height:400px;text-align:center;">
	<img class="img" src="http://www.qwqoffice.com/images/icon.png" width="300" height="300">
	<span class="vertical-middle"></span>
</div>


CSS代码

.img{
	vertical-align:middle;
}
.vertical-middle{
	display:inline-block;
	height:100%;
	vertical-align:middle;
}


加上如上属性后,图片就垂直居中了。原理是利用vertical-align实现垂直,决定行高的是行内最高的元素的值。

发表您的留言