关闭

css样式中div永久居中

标签: htmlcssdiv
328人阅读 评论(0) 收藏 举报
分类:

在网上看了很多, 让div居中,有设置 float:center,text-align:center的方式,但都不够完美。

当然,我这个方法,也是在网上搜到的,只是详细说明一下每一个css属性的含义而已。

  1. <span style="font-size:18px;">.divCenter  
  2. {  
  3.     position:absolute;  
  4.     width:300px;  
  5.     height:160px;  
  6.     left:50%;  
  7.     top:50%;  
  8.     margin-left:-150px;  
  9.     margin-top:-80px;  
  10.     background-color:Green;  
  11. }</span>  

position,既设置绝对定位,以免影响其他控件;

width,height:这个不用说了;

left, top: 50%,这说明什么呢?这说明当我们计算左边距和上边距时,是从body的,中间开始算的。left:50%,说明,以当前屏幕垂直中线为标准;top:50%,说明以当前屏幕的水平中线为标准;

margin-left: 左边距,为负值,说明是以left,既上面提到 的垂直中线为标准,向左边开始计值.;若为正,则是向右开始计值;这里的值应该设置成width的一半,width为300px,则它应该为-150px,这样看上去才会100%距中!

margin-top:道理同margin-left

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:686次
    • 积分:10
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档