CSS图片水平垂直居中

[ 637 查看 / 0 回复 ]

返回列表

fly1397

组别版主
性别
生日1987-3-10
积分49
帖子40
注册时间 2009-02-16

2009-02-18 18:20 |只看楼主 1^#

字体大小: t T

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
.fly {
float: left;
text-align: center;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
font-size: 1em;
line-height: 148px; /*----这里是需要写的---*/
}
.fly img {
margin-top: expression(( 150 - this.height ) / 2); /*-----这里很重要利用父级元素的高度减去自己的高度再除以2----*/
}
</style>
</head>
<body>

<div class="fly"> <img src="images/01.gif" width="70" height="120" /> </div>
<div class="fly"> <img src="images/02.gif" width="90" height="80" /> </div>
<div class="fly"> <img src="images/03.gif" width="70" height="120" /> </div>
<div style="clear:both"></div>
<p></p>
</body>
</html>

另外一种

html：

<div class="image">
<i></i>
<img src=http://css.oncecode.com/Images/gif/logo.png />
</div>

CSS：

.image{
border:1px solid #CDCDCD;
background-color

EFEFEF;
height:300px;
line-height:300px;
width:400px;
text-align:center;
*display:table-cell;
*vertical-align:middle;
}
.image i{
*display:inline-block;
*height:100%;
*vertical-align:middle
}
.image img{
vertical-align:middle;
display:inline;
}

兼容firefox 2.0 和ie6、ie7

TOP

返回列表

上一主题 | 下一主题

创想C2C商城高级企业版V4.03发布	创想企业网站建设解决方案	商城高级企业版全新亮相	好客玫琳凯直销联盟网
创想ECS系统安装配置手册	创想商务网B2B高级企业版	创想正在进行的优惠活动	青龙建材装饰城
创想ECS系统使用操作指南	创想ECS系统风格模板技术	创想软件使用文档中心	海量网页设计素材共享