文本、DIV水平居中和垂直居中

时间:2017-08-25 14:26:12   收藏:0   阅读:235

文本居中

text-align:center;    //代表文本居中

文本垂直居中

text-align:center;
height:100px;        //文本包含块的高度
line-height:100px;   //行内高度          垂直需要文本包含块的高度和行内高度一致

DIV居中

margin:0 auto;

DIV垂直居中

div垂直居中分两种情况,一种是已知该div的宽高;另一种是div的宽高是未知的。

1.宽高已知

{
     width:100px;
     height:100px;
     position:absolute;
     top:50%;               //距离左包含块
     left:50%;              //距离左包含块
     margin-left:-50px;     //-(该DIV的宽度/2)
     margin-top:-50px;      //-(该DIV的高度/2)
}

2.宽高未知(需要用到Jquery)

function resize(div){
       var windowWidth = $(window).width();        //获取当前浏览器窗口(可见区域)的宽度
       var windowHeight = $(window).height();      //获取当前浏览器窗口(可见区域)的高度
       var divWidth = div.outerWidth();            //获取该DIV的宽度(包括border以内)
       var divHeight = div.outerHeight();          //获取该DIV的高度(包括border以内)
       var w =  (windowWidth - divWidth)/2;             
       var h =  (windowHeight - divHeight)/2;
       div.css({
               position:"absolute",
               left: w+ "px",
               right: h + "px"
})
}

resize(..);

拓展

技术分享

如图,在Jquery中,

$().width() 代表获取width,不包括padding/border/margin;

$().innerWidth()代表获取padding+width;

$().outerWidth()代表获取padding+wdith+border;

$().outerWidth(true)代表获取padding+width+border+margin;

原文:http://www.cnblogs.com/xiaoyamemeda/p/7427737.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!