div垂直居中於頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>管理員登錄</title>  

</head>  

<style>   

body {padding: 0; margin: 0;}   

body,html{height: 100%;}   

#outer {   

     height: 100%;   

     overflow: hidden;   

     position: relative;   

     width: 100%;   

     display:table;   

}   

 

#outer[id] {   

 

     display: table;   

     position: static;   

 

 

     *position:relative;   

 

 

     _position: static;   

}   

#middle {   

 

     position: absolute;   

     top: 20%;   

     left: 0;   

     vertical-align:middle;   

     display:table-cell;   

     width:100%;   

 

 

     *vertical-align:middle;   

     *display:table-cell;   

     *width:100%;   

 

 

     _vertical-align:;   

     _display:;   

     _width:;   

}   

#middle[id] {   

 

     display: table-cell;   

     vertical-align: middle;   

     position: static;   

     top:50%;   

     left:0;   

     width:100%;   

 

 

     *position:absolute;   

 

 

     _position: ;   

}   

 

#inner {   

     position: relative;   

     top: -50%;   

     margin: 0 auto;   

     text-align:center;   

}   

 

#content{   

     width:581px;   

     height:369px;   

     border:1px solid;   

 

     margin: 0 auto;   

     text-align:left;   

}  

 

A {

font-size: 14px;

color: #006699;

text-decoration: none;

}

A:ACTIVE {

color : #006699;

text-decoration: none;

}

A:FOCUS {

color: black;

text-decoration: none;

}

A:HOVER {

color: #ff4500;

text-decoration: none;

}

A:LINK {

text-decoration: none;

}

.InputCss {

font-size: 14px;

color: #003399;

font-family: "宋體";

font-style: normal;

border-color: #CCCCCC #CCCCCC #CCCCCC #CCCCCC;

border: 1px #CCCCCC solid;

height:15px;

width:150px;

}

#shadow {

position: relative;

/*left: 3px;

top: 30px;*/

margin-right: 3px;

margin-bottom: 3px;

width:584px;

}

#shadow .shadow2, #shadow .shadow3, #shadow .content {

    position: relative;

left: -1px;

top: -1px;

}

#shadow .shadow1 {

background: #F1F0F1;

width:584px;

}

#shadow .shadow2 {

background: #DBDADB;

}

#shadow .shadow3 {

background: #B8B6B8;

width:584px;

}

#shadow .content {

text-align:center;

background: #ffffff;

background-repeat:no-repeat;

border: 1px solid #848284;

height:369px;

width:581px;

}

 

 

 

.STYLE1 {

font-weight: bold;

font-size:15px;

color:#999999;

font-family:"宋體-方正超大字符集";

width:581px; height:85px; float:left; background-color:#ECECEC;

}

.login_top{

width:581px; height:284px; background-image:url(../images/11059604.gif)}

.login_all{

margin-right:100px; margin-left:50px; width:431px; float:left}

</style>  

<body>  

<div id="outer">  

    <div id="middle">  

        <div id="inner">  

             <div id="content"> <div id="shadow">

    <div class="shadow1">

      <div class="shadow2">

        <div class="shadow3">

          <div class="content">

            <div class="login_top"></div>

            <div class="STYLE1">

              <form name="form1" method="post" action="">

                <div class="login_all">

                  <div style="width:325px; float:left; text-align:right; margin-right:6px;">用&nbsp;戶&nbsp;名

                    <input name="textfield" type="text" class="InputCss" id="textfield"><br>

                   密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼

                    <input name="textfield2" type="password" class="InputCss" id="textfield2">

                  </div>

                  <div style="width:18px; float:left; margin-left:2px"><a href="javascript:alert('ok');"><img src="../images/loginbtn.gif" width="78" height="40" border="0"></a></div>

                </div>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div></div>  

        </div>  

    </div>  

</div>  

</body>  

</html>  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章