注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

vingo

日月

 
 
 

日志

 
 
 
 

div  

2014-12-24 16:17:14|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 绝对居中:即在客户端上任何分辨率下纵横方向均居中

         绝对定位的DIV绝对居中显示 - 维子 - 々Angel不哭々

紫色的正方形为绝对定位的div

position:absolute; 
 top: 50%; 
 left: 50%; 只能把div定位在以红色圈为起点的位置,加上margin:-100px 0px 0px -100后,便可以让其移动到以红点为中心的位置。;

样例代码:

<html> 
<head> 
<title>Nice and Free CSS Template 11</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"><!-- 
/*   body und schrift deffinitionen */ 
body { 
background-color: #e1ddd9; 
font-size: 12px; 
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif; 
color:#564b47; 
padding:0px; 
margin:0px;
 
} 
#inhalt { 
position:absolute; 
height:200px; 
width:400px;
 
margin:-100px 0px 0px -200px; 
top: 50%; 
left: 50%;
 
text-align: left; 
padding: 0px; 
background-color: #f5f5f5; 
border: 1px dotted #000000; 
overflow: auto; 
} 
p, h1 { 
margin: 0px; 
padding: 10px; 

h1 { 
font-size: 11px; 
text-transform:uppercase; 
text-align: right; 
color: #564b47; 
background-color: #90897a; 

a { 
color: #ff66cc; 
font-size: 11px; 
background-color:transparent; 
text-decoration: none; 

--></style> 
</head> 
<body> 
<div id="inhalt">
 
<p><b>centered</b><br /><br /> 
This area should be horizontally and vertically centered.<br /> 
This text stays left aligned<br /> 
<b>ie mac doesn’t like this! </b><br /> 
<a href="/">more nice and free css templates</a> 
</p> 
<p> 
</div> 
</body> 
</html>

  评论这张
 
阅读(6)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017