<!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>
浙公网安备 33010602011771号