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


Posted in Javascript onDecember 23, 2013

当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;//监听事件
Javascript 相关文章推荐
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
layui表格实现代码
May 20 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
手把手教你实现 Promise的使用方法
Sep 02 Javascript
javascript实现简单的Map示例介绍
Dec 23 #Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 #Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 #Javascript
js写的评论分页(还不错)
Dec 23 #Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 #Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 #Javascript
jquery实现图片翻页效果
Dec 23 #Javascript
You might like
php+ajax实现文章自动保存的方法
2014/12/30 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python根据文件大小打log日志
2014/10/09 Python
学习python类方法与对象方法
2016/03/15 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python里dict变成list实例方法
2019/06/26 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
中班幼儿评语大全
2014/04/30 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
如何利用python创作字符画
2022/06/25 Python
Windows server 2016服务器基本设置
2022/08/14 Servers