CSS2 伪元素 :after 使大小不固定的图片垂直居中显示


浏览器支持

IE6+ 及 Chrome、Firefox、Opera、Safari 等主流浏览器支持。
Chrome 浏览器的水平居中貌似左边偏移了点,这是因为 Chrome 浏览器 font-size:0,不能消除空格产生的水平距离的原因。

代码实现

<style>
	.pic_box {
		width: 300px;
		height: 300px;
		background-color: #beceeb;
		font-size: 0;
		*font-size: 200px;
		text-align: center;
		border-right: 1px solid red;
		float: left;
	}
	.pic_box img {
		vertical-align: middle;
	}
	.pic_box:after {
		display: inline-block;
		width: 0;
		height: 100%;
		content: "center";
		vertical-align: middle;
		overflow: hidden;
	}
</style>
<body>
<div class="pic_box">
    <img src="zfx.jpg" />
</div>
<div class="pic_box">
    <img src="cfx.jpg" />
</div>
<div class="pic_box">
    <img src="cfx2.jpg" />
</div>
</body>

CSS2 伪元素 :after 使大小不固定的图片垂直居中显示

代码解释

IE6/7 不支持 :after 伪类,可以用另外的方法让图片垂直居中,例如 font-size 方法,设一个比较大的字体大小,IE6/7 就可以实现图片垂直对齐了,至于其他浏览器,就用 :after 伪类+ content 内容生成一个 vertical-align:middle 属性的元素就可以了。


<< CSS2 伪元素 :after 清除浮动的影响 CSS 实现图片垂直居中 >>


没有账号? 忘记密码?

社交账号快速登录