浮动的div自适应居中显示的js代码
当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值)
可以先用jquery获取外围的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;//监听事件
相关推荐
-
Div上下居中
Div上下居中-www.51windows.Net 我站在中央了 center 我站在中央了 center [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
让2个DIV居中并排显示
div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -120px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
JS弹出居中的DIV的代码
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度.大小随着浏览器的窗口大小而改变. document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度.大小随着浏览器的窗口大小而改变. document.body.scrollTop(网页被卷去的高):是指拉
-
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
-
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
-
文字或图片元素在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=
-
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 -'+($('
-
完美实现浮动元素横排居中显示
经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看. 首先看html代码: <div class="webFooter"> <div class="wrap"> <div class="tabs"> <ul&g
-
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窗口
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
-
用js 让图片在 div或dl里 居中,底部对齐
解决图片长\宽大于容器,一边长一边宽,小于容器 在ff,ie里都通过这里是js代码: 复制代码 代码如下: <HTML> <HEAD> <TITLE> 我们 www.jb51.net New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=
随机推荐
- 教你构建第一个Java Applet程序
- 详解Android中一些SQLite的增删改查操作
- javascript字符串替换函数如何一次性全部替换掉
- php不用GD库生成当前时间的PNG格式图象的程序第1/2页
- js实现图片无缝滚动特效
- 在smarty中调用php内置函数的方法
- asp动态页面防采集的新方法
- 一个字符串中出现次数最多的字符 统计这个次数【实现代码】
- MySQL常用基本SQL语句总结
- JavaScript 实现的checkbox经典实例分享
- Apache 支持CGI程序和SSI程序的设置方法
- js实现开启密码大写提示
- PHP和Java 集成开发详解分析 强强联合第1/4页
- Android 百度地图marker中图片不显示的解决方法(推荐)
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
- 你真的知道怎么优化SQL吗
- vue-cli 引入jQuery,Bootstrap,popper的方法
- Vue+webpack项目配置便于维护的目录结构教程详解
- 在node环境下parse Smarty模板的使用示例代码
- Python3自定义http/https请求拦截mitmproxy脚本实例