[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实现垂直，决定行高的是行内最高的元素的值。

版权声明：本文为原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
本文链接：https://www.qwqoffice.com/article.php?mod=view&tid=14
回复

发表您的留言