浮动的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中的异常处理方法分享
Dec 22 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
js实现车辆管理系统
Aug 26 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python+微信接口实现运维报警
2016/08/27 Python
python使用opencv进行人脸识别
2017/04/07 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python猜数字算法题详解
2020/03/01 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
小区门卫工作职责
2013/12/14 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书