程序博客网 > windows 能用final cut

div代码居中上下居中左右居中

来源：互联网发布：windows 能用final cut 编辑：程序博客网时间：2024/04/30 22:07

<!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" content="text/html; charset=gb2312" />
<title>Universal vertical center with css</title>
<style>
#outer {
height:300px;
width:300px;
overflow:hidden;
position:relative;
text-align:center;
}
#outer[id]{
display:table;
position:static;
}
#middle{
position:absolute;
top:50%;
}
/* for explorer only/
#middle[id]{
display:table-cell;
vertical-align:middle;
position:static;
}
#inner{
position:relative;
top:50%;
}
/ for explorer only/
/ optional : #inner[id] {position:static}/
.withBorder{
border:1px green solid;
}
</style>
</head>

<body>
<div id="outer" class="withBorder">
<div id="middle">
<div id="inner">
<img src="http://blog.163.com/lixiaofengfly@126/blog/image/guest_test_icon2.jpg"/>

</div>
</div>
</div>
</body>
</html>

精简后的代码

<!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" content="text/html; charset=gb2312" />
<title>Universal vertical center with css</title>
<style>

#outer {
height:300px;
width:300px;
display:table-cell;
vertical-align:middle;/火狐，chrom垂直居中/
line-height:300px; /IE7垂直居中/
text-align:center; /水平居中*/
}
.withBorder{
border:1px green solid;
}
</style>
</head>

<body>
<div id="outer" class="withBorder">
<img src="http://blog.163.com/lixiaofengfly@126/blog/image/guest_test_icon2.jpg"/>
</div>
</body>
</html>

windows 能用final cut

windows 能用final cut

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 yahoo邮箱登陆邮箱大全号码大全 139邮箱登陆登录申请免费邮箱邮箱号怎么写 139邮箱登陆登录入口扣扣邮箱登陆 q邮箱登录首页 hotmail邮箱登陆邮箱号大全免费什么是邮箱帐号登陆163邮箱入口如何登陆邮箱手机邮箱下载企业邮箱购买企业邮箱费用申请公司邮箱企业邮箱开通公司电子邮箱企业邮箱收费标准企业邮箱地址企业邮箱怎么办理企业邮箱作用电信企业邮箱付费企业邮箱哪个好生意宝企业邮箱什么邮箱好用企业邮箱租用企业邮箱网址雅虎企业邮箱云邮企业邮箱公司邮箱价格企业邮箱后缀国际企业邮箱公司邮箱下载收费的企业邮箱企业邮箱要怎么申请 yahoo邮箱注册租用企业邮箱免费企业邮箱全速企业邮箱