浮动的div自适应居中显示的js代码

当div是浮动的时候浏览器窗口发生变化的时候不能居中显示（因为浮动的时候一般设定的有left或者right值）

可以先用jquery获取外围的div随浏览器变化而变化的宽度（加上监听事件）

之后再获取div的宽度 例如：


代码如下:

function autoWidth(){

var bW = $(".call_man").width();//外围的div
     var popWidth = (bW-150)/2    //（150是div的宽度）
    $(".rts").css("left",popWidth);  //把取得值赋给div 就是div距离左侧的距离

}

autoWidth();
window.onresize = autoWidth;//监听事件

赞 (0)

相关推荐

  • Div上下居中

    Div上下居中-www.51windows.Net 我站在中央了 center 我站在中央了 center [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS弹出居中的DIV的代码

    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义  document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度.大小随着浏览器的窗口大小而改变.  document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度.大小随着浏览器的窗口大小而改变.  document.body.scrollTop(网页被卷去的高):是指拉

  • CSS如何使DIV层居中

    如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " 需要说明的是,

  • jquery div 居中技巧应用介绍

    very short version: [html] 复制代码 代码如下: $('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'}); $('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('

  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top

  • 基于jQuery实现的水平和垂直居中的div窗口

    1.通过css实现水平居中: 复制代码 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2.通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸: 复制代码 代码如下: .className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-1

  • 文字或图片元素在DIV中垂直居中

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

  • 完美实现浮动元素横排居中显示

    经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看. 首先看html代码: <div class="webFooter"> <div class="wrap"> <div class="tabs"> <ul&g

  • 用js 让图片在 div或dl里　居中，底部对齐

    解决图片长\宽大于容器,一边长一边宽,小于容器 在ff,ie里都通过这里是js代码: 复制代码 代码如下: <HTML>  <HEAD>   <TITLE> 我们 www.jb51.net New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT=

  • JS实现div居中示例

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS实现div居中</title> <style> /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; /*le

  • 让2个DIV居中并排显示

    div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -120px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

随机推荐