zoukankan      html  css  js  c++  java
  • css 水平垂直居中

    css控制div水平居中

    创建一个div的水平居中很简单,只需要设定宽度和左右margin值自动。这种方法可以用在block级元素上(div、图片、h1等)。如果在inline元素上,必须使用display:block。

     
     
     
     
       
    1 .className{
    2     margin:0 auto;
    3     width:200px;
    4     height:200px;
    5 }

    css控制div水平、垂直居中

    控制div的水平和水质居中,比较棘手,你需要预先知道div的宽度和高度。

    首先设定绝对定位,这样可以把元素从周围分离出来,相对于window定位。然后设定左上居中50%定位,这样就可以中间了。最后设定div的左上的定位为负值,分别为宽高的一半。

     
    1 .className{
    2     width:300px;
    3     height:200px;
    4     position:absolute;
    5     left:50%;
    6     top:50%;
    7     margin:-100px 0 0 -150px;
    8 }

    css+Jquery控制div水平、垂直居中

    使用div+css只能是先定了宽高的div水平和垂直居中。看看jquery能做什么。

     

    01

    $(window).resize(function(){

    02   
    03     $('.className').css({
    04         position:'absolute',
    05         left: ($(window).width() - $('.className').outerWidth())/2,
    06         top: ($(window).height() - $('.className').outerHeight())/2
    07     });
    08   
    09 });

    10

      

    11 // To initially run the function:
    12 $(window).resize();

    其实模仿的上一种办法,只是在浏览器窗口改变时,动态计算div的高度和宽度。偷巧的完成了div的宽度和高度计算。

    缺点是必须JavaScript支持。但,其效果非常好,可以用在华丽的用户界面上。

  • 相关阅读:
    foreach
    jmeter的正则表达式
    jmeter四种参数化
    monkey测试命令
    monkey测试结果分析
    macOS Sierra下如何打开任何来源(10.12系统)
    开发中一些小技巧
    Xcode 使用技巧
    总有你需要的之 ios 小技巧 (下)
    在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新。
  • 原文地址:https://www.cnblogs.com/weixuexi/p/3502370.html
Copyright © 2011-2022 走看看