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

最新推荐文章于 2022-07-18 09:34:07 发布

weixin_30662539

最新推荐文章于 2022-07-18 09:34:07 发布

阅读量120

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/heskysky/archive/2012/12/14/2817503.html

版权

代码作者：同事宁儿；

浏览吸收者：本人天少侠

代码如下：

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

转载于:https://www.cnblogs.com/heskysky/archive/2012/12/14/2817503.html

weixin_30662539

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css全屏自适应+水平垂直居中【同事武功传授】

代码作者：同事宁儿；浏览吸收者：本人天少侠代码如下：div+css全屏自适应[整体垂直居中]/*兼容ie7-ie9、火狐、谷歌浏览器，div+css全屏自适应[整体垂直居中]*//*author:sn，time:2012-12-7*//*visitor:htt time:2012.12.7*//*html样例*/<!DOCTYPE ht...
复制链接

扫一扫