使DIV相对窗口大小左右拖动始终水平居中
<!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相对窗口大小左右拖动始终水平居中的更多相关文章
- CSS 如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...
- 使 div 元素看上去像一个按钮
使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...
- Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- css使div居中
每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;
- js控制使div自动适应居中
一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- Duilib改进窗口拖动,使整个窗口都能拖动两种方法(转载)
转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...
- div图片垂直居中 如何使div中图片垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...
随机推荐
- Web性能测试篇:AB 压力测试
1. 压力测试的概念\定义 1.这段话是给刚接触\学习性能测试知识的初学者,在实际工作中都会接触到性能测试.压力测试.负载测试等专业名词也容易混淆,下面带大家熟悉下这到底是怎么定义: 1.1.性能测试 ...
- Docker 快速入门教程
本文目的是给几乎从未接触过docker,或者仅仅是听说或者通过新闻了解过Docker的同学 通过一个已有的Docker仓库构建和提交自己的Docker 镜像 这里会涉及到一些概念,但是不单独介绍 这里 ...
- Fedora 26/27/28网易云音乐安装
信息从 https://www.southcity-oldboy.com/1474.html获取,感谢站长南城旧少年! 以下为前辈网页上的内容 1.安装 RPM Fusion 源 (free): ht ...
- java处理大文本2G以上
面试中经常碰到类似问题,问题的关键我觉得是用设置一个缓冲区 还有一个思路 是通过Linux split 命令将文件直接切割成小文件,再进行处理再汇总. 或者jdk7提供的 forkjoin 框架,利用 ...
- nginx 根据get参数重定向(根据电视访问的mac地址传递的值,来重定向访问别的url地址,这样就可以进行单台的测试环境。。)
背景是这样的: 公司要做所有客户端的迁移到别的云平台,但又担心会有问题,所以考虑分批次迁移过去,这样就需要迁移部分用户,因为客户端刷但都是统一但rom包,不能轻易发生改动,所以决定用重定向方式将部分客 ...
- tomcat启动时,报java.io.EOFException
在启动Tomcat的时候突然报出IO异常,具体异常如下图 在网上找了解决方法,测试了好几种,都不行,到最后看了一个博客解决了,在此记录一下. 百度了下,网上都是说去Tomcat目录下:将tomcat5 ...
- <<世界是数字的>>读书笔记
<世界是数字的>这本书是大学职业规划老师介绍个我读的,从着本中我学到了很多. 第一章,计算机里有什么.这个问题可以从两方面来看:逻辑上或者说功能上的组成,即每一部分是什么.做什么.怎样做. ...
- Markdown的基本语法
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...
- inotify 工具 是一种强大的、细粒度的、异步文件系统监控机制
前言:Inotify是一种强大的.细粒度的.异步文件系统监控机制,它满足各种各样的文件监控需要,可以监控文件系统的访问属性.读写属性.权限属性.删除创建.移动等操作,也就是可以监控文件发生的一切变化. ...
- Struts2(六)
以下内容是基于导入struts2-2.3.32.jar包来讲的 1.OGNL OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表 ...