<!doctype html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>使DIV相对窗口大小左右拖动始终水平居中</title>

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <style type="text/css">

        body{

            margin:0px;

        }

        #parentBox{

            /* 父盒子 */

            max-width:100%;

            min-height:400px;

            height:auto;      /*声明高度自适应*/

            padding:50px 0px; /*内边距可以指定*/

            background:#ccc;

        }

        #centerDIV{

            /* 子层 */

            width:60%;        /*相对父DIV宽度比例*/

            height:auto;      /*声明高度自适应*/

            margin:0px auto;  /*水平居中*/

            background:yellow;

        }

    </style>

</head>

<body>

    <div id="parentBox">

        <div id="centerDIV">

            使DIV相对窗口大小拖动始终水平居中：<br />

            窗口左右（水平）拖动时，DIV层随窗口宽度变化而变化，始终水平居中。<br /><br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

        </div>

    </div>

</body>

</html>

使DIV相对窗口大小左右拖动始终水平居中的更多相关文章

  1. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  2. 使 div 元素看上去像一个按钮

    使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...

  3. Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

         div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...

  4. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  5. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  6. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  7. HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  8. Duilib改进窗口拖动，使整个窗口都能拖动两种方法(转载)

    转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...

  9. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

随机推荐

  1. Maven学习(二)-----Maven启用代理访问

    Maven启用代理访问 如果你的公司正在建立一个防火墙,并使用HTTP代理服务器来阻止用户直接连接到互联网.如果您使用代理,Maven将无法下载任何依赖. 为了使它工作,你必须声明在 Maven 的配 ...

  2. NTP(Network Time Protocol)

    Linux NTP配置详解 (Network Time Protocol) http://www.ntp.org/ Meinberg NTP packages provide a GUI instal ...

  3. Golang项目开发管理

    工具 1. task(项目管理,类似于make) go get -u -v github.com/go-task/task/cmd/task 2. gopm(go依赖管理) go get -u git ...

  4. eclipse安装反编译器jad

    1.下载net.sf.jadclipse_3.3.0.jar.jadclipse_3.3.0.jar.jad.exe 2.将net.sf.jadclipse_3.3.0.jar放在eclipse的安装 ...

  5. 获取秒级时间戳和毫秒级时间戳---基于python

    获取秒级时间戳和毫秒级时间戳 import timeimport datetime t = time.time() print (t) #原始时间数据print (int(t)) #秒级时间戳prin ...

  6. HDU 5855 Less Time, More profit 最大权闭合子图

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5855 Less Time, More profit Time Limit: 2000/1000 MS ...

  7. 缓存-System.Web.Caching.Cache

    实现 Web 应用程序的缓存. 每个应用程序域创建一个此类的实例,只要应用程序域将保持活动状态,保持有效. 有关此类的实例的信息,请通过Cache的属性HttpContext对象或Cache属性的Pa ...

  8. timestamp 学习

    该答案摘抄自CSDN. 哇,奇迹,跨度三年了,不知道楼主是否已经解决了此问题. 路过,简单说一下,timestamp 主要是记录该行的最后修改时间戳, 注意,这个时间戳是不可以转换为时间的,只能标注该 ...

  9. Strust2： 工作流程

    以下为Struts2的体系结构图: Struts2框架处理用户请求,大体分为以下几个过程: (1)用户发出一个HttpServletRequest请求 (2)请求经过一系列过滤器,最后达到Filter ...

  10. 阿里云服务器内部dns可能出错

    今天部署一个阿里云服务器,所有配置项都改好了,就是连接不上本机. 反复查找,防火墙端口和网卡接口都配置对了,selinux也关闭了,但就是连接不上阿里云内网的ip. 由于连接是本机,把ip填写为127 ...