您的位置：首页 > Web前端 > CSS

div+css全屏自适应+水平垂直居中【同事武功传授】

2012-12-14 09:42 567 查看

代码作者：同事宁儿；

浏览吸收者：本人天少侠

代码如下：

div+css全屏自适应[整体垂直居中]

/*兼容ie7-ie9、火狐、谷歌浏览器，div+css全屏自适应[整体垂直居中]*/
/*author:sn，time:2012-12-7*/

/*visitor:htt time:2012.12.7*/

/*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>
<link rel="stylesheet" href="divPosition.css" type="text/css" />
</head>
<body>
<div class="verticalAlign"></div><!--定位元素，页面不显示，只为页面容器整体垂直对齐作参照-->
<div class="divAll"><!--父级垂直居中-->
<!--子级上中下排列-->
<div id='divTop' class="divTop">
</div>
<div id='divBody' class="divBody">
</div>
<div id='divBottom' class="divBottom">
</div>
</div>
</body>
</html>

/*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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

div+css全屏自适应+水平垂直居中 【同事武功传授】

div+css全屏自适应+水平垂直居中【同事武功传授】