DIV + CSS 는 어떻게 문 자 를 수직 으로 가운데 로 합 니까?

원문의 출처:http://zhidao.baidu.com/question/69214815.html?qbl=relate_question_3
          ,      CSS    vertical-align           ?                  CSS Hack      !            ,CSS     vertical-align  ,     (X)HTML     valign        ,        <td>、<th>、<caption> ,  <div>、<span>        valign   ,    vertical-align       。 

CSS    DIV          

 、       

             ,            ,             height       line-height    。 : 

imoker.cn(   )       :

div {   
  height:25px;   
  line-height:25px;   
  overflow:hidden;   
}
       ,    overflow:hidden                      ,             。 

imoker.cn(   )       :

<!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>   
    <title>            </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div {   
        height:25px;   
        line-height:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
      }   
    </style>   
  </head>   
  <body>   
    <div>                !</div>   
  </body>   
</html> 
   Internet Explorer 6      ,                。 

 、              

      ,                                        ,    Padding,    padding     。   ,     “   ”       ,         <div>           。           : 

imoker.cn(   )       :

div {   
  padding:25px;   
} 
                     ,       ,                          。 

imoker.cn(   )       :

<!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>   
    <title>            </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div {   
        padding:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
        width:760px;   
      }   
    </style>   
  </head>   
  <body>   
    <div><pre>                !   
      div {   
        padding:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
      }   
    </pre></div>   
  </body>   
</html> 
 、            

       ,      CSS  vertical-align       valign   (X)HTML     ,   CSS     display      <table>,              <div>  <table>     vertical-align 。  ,display:table display:table-cell     ,           ,           ,                  <div>  : 

imoker.cn(   )       :

div#wrap {   
  height:400px;   
  display:table;   
}   
div#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
}

imoker.cn(   )       :

<!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>    
    <title>            </title>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <style type="text/css">    
      body { font-size:12px;font-family:tahoma;}    
        div#wrap {    
        height:400px;    
        display:table;    
      }    
      div#content {    
        vertical-align:middle;    
        display:table-cell;    
        border:1px solid #FF0099;    
        background-color:#FFCCFF;    
        width:760px;    
      }    
    </style>    
  </head>    
  <body>    
    <div id="wrap">    
      <div id="content"><pre>                !    
        div#wrap {    
          height:400px;    
          display:table;    
        }    
        div#content {    
          vertical-align:middle;    
          display:table-cell;    
          border:1px solid #FF0099;    
          background-color:#FFCCFF;    
          width:760px;    
       }    
      </pre></div>    
    </div>    
  </body>    
</html> 
           ,      Internet Explorer 6         display:table display:table-cell,       Internet Explorer 6           。 ,      !          。

 、 Internet Explorer       

 Internet Explorer 6      ,             。 Internet Explorer 6          ,               ,             (                  ,                      ,             )。  ,         (X)HTML   : 

imoker.cn(   )       :

<div id="wrap">   
  <div id="subwrap">   
    <div id="content">   
    </div>   
  </div>   
</div>
     subwrap       ,  content         ,               ,      content         ,    100%      content     。  ,     subwrap position 40%,      content     wrap         top:-80%;  ,      subwrap top:50%  ,      100%   content         ,       content   50% ?           。               Internet Explorer 6      : 

imoker.cn(   )       :

div#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  position:relative;   
}   
div#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
}   
div#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
} 
  ,       Internet Exlporer 6                 。(     ,        ,                ,            Internet Exlporer 6   Bug   ,           ,     ) 

imoker.cn(   )       :

<!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>   
    <title>            </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div#wrap {   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
        width:760px;   
        height:400px;   
        position:relative;   
      }   
      div#subwrap {   
        position:absolute;   
        top:50%;   
      }   
      div#content {   
          position:relative;   
          top:-50%;   
      }   
    </style>   
  </head>   
  <body>   
    <div id="wrap">   
      <div id="subwrap">   
        <div id="content"><pre>                !   
          div#wrap {   
            border:1px solid #FF0099;   
            background-color:#FFCCFF;   
            width:760px;   
            height:500px;   
            position:relative;   
          }   
          div#subwrap {   
            position:absolute;   
            border:1px solid #000;   
            top:50%;   
          }   
          div#content {   
            border:1px solid #000;   
            position:relative;   
            top:-50%;   
          }  
        </pre></div>   
      </div>   
    </div>   
  </body>   
</html>
 、        

                          ,      CSS hack   。      CSS Hack      ,       “  CSS hack:  IE6、IE7、IE8、Firefox、Opera”: 

imoker.cn(   )       :

div#wrap {   
  display:table;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  _position:relative;   
  overflow:hidden;   
}   
div#subwrap {   
  vertical-align:middle;   
  display:table-cell;   
  _position:absolute;   
  _top:50%;   
}   
div#content {   
  _position:relative;   
  _top:-50%;   
}
   ,             。 

imoker.cn(   )       :

<!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>   
    <title>            </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div#wrap {   
        display:table;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
        width:760px;   
        height:400px;   
        _position:relative;   
        overflow:hidden;   
      }   
      div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
        _position:absolute;   
        _top:50%;   
      }   
      div#content {   
        _position:relative;   
        _top:-50%;   
      }   
    </style>   
  </head>   
  <body>   
    <div id="wrap">   
      <div id="subwrap">   
        <div id="content"><pre>                !   
          div#wrap {   
            border:1px solid #FF0099;   
            background-color:#FFCCFF;   
            width:760px;   
            height:500px;   
            position:relative;   
          }   
          div#subwrap {   
            position:absolute;   
            border:1px solid #000;   
            top:50%;   
          }   
          div#content {   
            border:1px solid #000;   
            position:relative;   
            top:-50%;   
          }  
        </pre></div>   
      </div>   
    </div>   
  </body>   
</html> 
p.s.     vertical-align   middle,     align   center,            。

참고 자료: http://www.imoker.cn/Article/ShowArticle.asp?ArticleID=185

좋은 웹페이지 즐겨찾기