DIV悬浮CSS如何居中?javascript(JQ)

html-css0160

DIV悬浮CSS如何居中?javascript(JQ),第1张

给1设置一个宽度和高的假如是500*400;给1设置绝对定位 然后设置left和top都为50%;再设置margin-left:-250pxmargin-top:-200px就可以居中了,然后设置z-index层级为99.让2变黑的话就添加一个mask层,设置一个div的标签名为mask。设置position为fixed;并设置他的left,top,right,bottom值都为0.然后设置background-color:#000opacity:0.2z-index:98;用js设置弹出1的时候显示mask就可以了

在.text样式里添加一个:position: relative

把.test-loading-img样式里的top,left,right,bottom四个注释取消掉,把 position:fixed改成position: absolute

完成

CSS有float:left和float:right,但能否实现float:center呢?水平居中浮动,当然是可以的,这里将介绍你实现方法。以下面的Li列表为例,我们要实现中间LI的居中浮动:

1    <div id="macji"> 

2    <ul class="macji-skin"> 

3    <li>列表一</li> 

4    <li>列表二</li> 

5    <li>列表三</li> 

6    </ul> 

7    </div> 

我们需要先了解下position:relative属性,它是指left、right、top、bottom等中的偏移位置。我们可以让ul为position:relativeleft:50%,再让li向左浮动,再让position:relativeright:50%(或者left:-50%),那么li就会向中间浮动一样居中了。不相信的可把下面的CSS定义结合上边的代码拷贝到HTML测试。

view source

01    #macji{  

02    position:relative 

03    width:100% 

04    height:80px 

05    background-color:#eee 

06    text-align:center 

07    overflow:hidden 

08    }  

09    #macji .macji-skin{  

10    float:left 

11    position:relative 

12    left:50% 

13    }  

14    #macji .macji-skin li{  

15    position:relative 

16    right:50% 

17    float:left 

18    margin:10px 

19    padding:0 10px 

20    border:solid 1px #000 

21    line-height:60px 

22    }  

虽然这样用有些麻烦,但对于一个优秀的前端设计师,这个技巧还是有必要掌握的哦。