CSS 实现图片垂直居中


使用空白图片实现垂直对齐

原理:将要显示的图片与一张透明的高度 100%、宽度 1 像素的透明图片vertical-align:middle对齐。

利用font-size大小实现 IE 下图片垂直居中是一致的。将font-size设置得很大,目的是撑开 IE 下默认文字空间的高度,其性质类似于空格,然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐;而这里将这个看不见的文字空间实例成一张透明的 gif 图片,高度可以轻松设置为外部标签的高度,宽度压缩至最小,然后通过vertical-align:middle对齐,就实现效果了。影响布局的只有vertical-align:middle这一个属性,在各个浏览器下都是一样的表现,不需要担心什么兼容性的问题。

注意

1.img 外容器宽度要大于要显示的图片的最大宽度 +1 像素;
2.img 外容器的字体大小设为 0px,也可以不设,但是两个 img 标签要连着写,避免空格。


	ul li {
		height: 128px;
		width: 200px;
		padding: 13px 0;
		float: left;
		margin-right: 10px;
		border: 1px solid #beceeb;
		text-align: center;
		font-size: 0;
	}
	ul li .alpha_img {
		height: 100%;
		width: 0;
		vertical-align: middle;
	}
	ul li span {
		display:inline-block;
		height:100%;
		width: 0;
		vertical-align: middle;
	}
	ul li .show_img {
		vertical-align: middle;
		height: 120px;
	}


<ul>
<li>
	<img class="show_img" src="../images/girl.jpg" /><img class="alpha_img" src="../images/fullalpha.gif" />
</li>
<li>
	<img class="show_img" src="../images/boy.jpg" /><span></span>
</li>
</ul>

CSS 实现图片垂直居中

要显示的图片后面跟了一个高度撑满容器,宽度为 0 的透明图片。这两个图片分别vertical-align:middle,就实现了要显示的图片与这个拉伸的透明图片的居中对齐,由于透明图片是透明的,不可见的,宽度也只有 0 像素,所以看上去就是要显示的图片相对于容器垂直居中了。

另外,其实这里不一定是透明的图片,使用任意的图片都可以,所以您其实说不定可以减少一次 http 请求,使用任意的图片将其拉伸至高度为容器高度,宽度 0 像素就可以了。

甚至,使用行内元素,例如 span,i 标签等,只要应用类似下面的 CSS:

span{display:inline-block; height:100%; width:0; vertical-align:middle;}

相比图片而言,多了个display:inline-block;但是会少一次链接请求。效果图和上面的一样的,完美的水平垂直居中。原理也与图片一样。

display:inline-block 和文字大小控制居中

此方法来自 Google picasa 相册的图片显示,代码相当简洁,是个成本很低,效果惊人的方法。适用于多图显示的情况。基本上用裸标签就实现了想要达到的效果。一般而言,图片阵列排列显示的时候,外面都有一个 a 标签的,起到链接的作用。而本处的方法就只要这一个 a 标签就足以实现图片垂直且居中的显示效果。其关键是将 a 标签默认的inline属性设置为inline-block属性,这样 a 标签既支持宽度,又支持vertical-align:middle,配合 img 的vertical-align:middle就可以实现图片的水平垂直居中显示了。

1.img 外的标签需是 a 标签或 span 这类 inline 属性的标签,div 标签也可以,但是 css 代码多些:*display:inline display:inline-block zoom:1,IE 下要先变成 inline 属性,再转变成 inline-block 属性。

2.此方法只需要两层标签即可,可谓代码超简洁,但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐,如果只是一个图片,vertical-align:middle就只有与空格对齐了。


	div a {
		display: inline-block;
		width: 1.2em;
		font-size: 128px;
		text-align: center;
		vertical-align: middle;
	}
	div a img {
		vertical-align: middle;
		padding: 2px;
		border: 1px solid #beceeb;
		height: 120px;
	}


<div>
	<a>
		<img src="../images/girl.jpg" />
	</a>
	<a>
		<img src="../images/boy.jpg" />
	</a>
</div>

CSS 实现图片垂直居中


<< CSS2 伪元素 :after 使大小不固定的图片垂直居中显示 CSS2 伪元素 :after 实现布局居中(模拟float:center) >>
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录