html居中定位
<!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-divansitional.ddiv">
<!-- saved from url=(0080)http://emap.shasm.gov.cn/TianDiTuSX/ResourceCenter/ServiceDetailInfo.aspx?ID=770 -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head> </head>
<body>
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
<div class="verticalAlign"></div><!--定位元素,页面不显示,只为页面容器整体垂直对齐作参照-->
<div class="divAll"><!--父级垂直居中-->
<!--子级上中下排列-->
<div id='divTop' class="divTop">aaaaaaaa
</div>
<div id='divBody' class="divBody">设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>设置上下左右的相对位置为0,可避免超出范围出现滚动条</br>
</div>
<div id='divBottom' class="divBottom">
ddddd
</div>
</div>
</body>
</html> <style>
/*css样例(divPosition.css)*/
html,body{
height: 100%;/*设置html和body的width和height为100%,可使全屏生效*/
width: 100%;
font-size: 16px;
font-family: 微软雅黑, 宋体, 黑体;
color: #535353;
margin: 0px; /*设置上下左右的相对位置为0,可避免超出范围出现滚动条*/
} body {
white-space: nowrap;/*设置white-space:nowrap,同时在相对参照元素中线居中时设定display:inline-block,可避免浏览器缩放时,垂直居中的容器换行*/
text-align: center;/*设置text-align: center,可使子容器水平对齐*/
} div {
display: inline-block;/*div内联不换行,ie8和ie9不识别带*的样式,只执行第一个display,ie6和ie7识别带*的样式,执行第二个display和zoom*/
*display:inline;/*ie6和ie7兼容display: inline-block,以【*display:inline;*zoom:1;】代替*/
*zoom:1;
} .verticalAlign {
vertical-align: middle;/*设置vertical-align: middle,可使此和同一级别元素中线对齐*/
height: 100%;
width: 0px; /*设置width:0px,可使此元素不显示,只为页面容器整体垂直对齐作参照*/
border: none;
padding: 0px;
margin: 0px 0px 0px -5px;/*设置mrgin-right:-5px,避免容器横向超出*/
} .divAll {
width: 100%;
height: auto;
vertical-align: middle;/*设置vertical-align: middle,相对同一级别元素中线对齐*/
margin: 0px;
border: none;
padding: 0px;
} /*以上为父级垂直居中,以下为子级上中下排列*/ .divBody {
width: 100%;
min-width: 900px;
vertical-align: middle;/*设置vertical-align: middle,相对同一级别元素中线对齐*/
margin: 0px;
border: none;
padding: 0px;
} .divTop {
background-image: url(../images/serviceDetail_logo.png);
background-repeat: no-repeat;
height: 61px;
width: 80%;
min-width: 900px;
margin-left: auto;/*设置高度,并设置margin的left和right为auto,在非absolute情况下可水平居中*/
margin-right: auto;
border-bottom: 5px solid #ff8a00;
vertical-align: top;/*设置vertical-align: top,相对同一级别元顶端对齐*/
display: block;/*div内联换行*/
} .divBottom {
width: 100%;
min-width: 900px;
height: 100px;
margin: 0px;
vertical-align: bottom;/*设置vertical-align: bottom,相对同一级别元素底端对齐*/
display: block;
}
</style>
html居中定位的更多相关文章
- 关于IE 浏览器的position居中定位的问题和 行块元素的设置问题
这两天在写页面时,遇到一些IE浏览器显示不正常的问题,主要有两个: 1. 在td 中设置span 元素水平垂直居中,在谷歌浏览器中可以正常显示,但是在IE 中却无法显示出想要的结果,即不能实现垂直水平 ...
- 0029 定位:position(相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性)
目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...
- CSS常见居中讨论
先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .con ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- 实现Canvas2D绘图 使元素绕中心居中旋转
我之前用canvas写了个头像剪切的demo,但是关于让载入的图片旋转是个问题,虽然通过其它方法实现了,但是感觉并不太好,于是查了些资料,想试着重新做一下canvas的旋转. 在开始之前,先让我们来做 ...
- div实现水平和垂直都居中的三个超实用的方法
本文仅仅介绍作者认为的三种不错的方式, 方式一:transform: translate(-50%,-50%) 示例代码如下: .div{ position: absolute; top: 50%; ...
- 详解 CSS 居中布局技巧
水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- 详解CSS居中布局技巧
本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...
随机推荐
- 四大组件之 BroadcastReceiver小结
总结提高,与君共勉 1. BroadcastReceiver是什么? BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来接收来自系统和应用中的广播. ...
- 学习tornado:模板
第一次接触tornado的template,是在做oastub的时候,因为一位同学在handler里面硬编码了html代码,我决定引入template机制来降低逻辑与页面的耦合. 简介 tornado ...
- C# BarCodeToHTML条码生成类
来自:http://www.sufeinet.com/forum.php?mod=viewthread&tid=656&extra=page%3D1%26filter%3Dtypeid ...
- NIO模式例子
NIO模式主要优势是体现在对多连接的管理,对众多连接各种事件的转发让处理变得更加高效,所以一般是服务器端才会使用NIO模式,而对于客户端为了方便及习惯使用阻塞模式的Socket进行通信.所以NIO模式 ...
- 【一天一道LeetCode】#13. Roman to Integer
一天一道LeetCode系列 (一)题目 Given a roman numeral, convert it to an integer. Input is guaranteed to be with ...
- /etc/fstab文件出错,无法进入Linux系统
问题描述 今天复习Linux文件系统管理,在Linux系统上挂载了一块新硬盘之后,然后分区,格式化,一步步走下来,为了能够使该硬盘在系统启动时自动挂载,于是将之写入了/etc/fstab文件,然而在r ...
- C语言获取系统时间的函数
在标准C编程中,我们如何写程序来获取当前系统的时间呢? 获取系统时间的函数 #include <time.h> time_t time(time_t *t) 参数:如果参数不为空,那么 ...
- Erlang cowboy 处理不规范的客户端
Erlang cowboy 处理不规范的客户端 Cowboy 1.0 参考 本章: Dealing with broken clients 存在许多HTTP协议的实现版本.许多广泛使用的客户端,如浏览 ...
- 在AndroidManifest.xml文件中设置Android程序的启动界面方法
从网上搜集了一堆的Android代码,比如Android的Login程序和Android的Helloworld程序,但是却总不能正确运行一个正确的程序,郁闷了很久,终于在一次一次的测试后成功的在And ...
- HBase学习资源
教程 <HBase.Administration.Cookbook> 中文版<HBase管理指南> <HBase in action> <HBase权威指南 ...