当前位置: 代码迷 >> Web前端 >> div正当中对齐
  详细解决方案

div正当中对齐

热度:90   发布时间:2012-10-29 10:03:53.0
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>居中对齐Div</title>
</head>

<style>
??? body{? text-align:center;}
?#outer{?
????? margin: auto;
?? width:60%;
????? background:#ffffcc;
?? text-align:center;
??? }
?.inner{
???? width:790px;
??height:300px;
??margin:5px;
??border:1px solid #000;
?}
* html .inner {display:inline}/* for ie*/
html>body #outer {display:table}/*for mozilla */
html>body .inner {display:table;float:left}/*for mozilla */
@media all and (min-width: 0px){/* opera 7 styles */
html>body .inner {display:inline-block;float:none;}
}
</style>
<body>
?? <div id="outer">
????? <div? class="inner">
????? <table width="100%">
?????? <tr>
?????? <td width="20%">编号</td>
??? <td align="left">1111111111</td>
??? </tr>
??? <tr>
?????? <td width="10%">邮箱地址</td>
?????? <td align="left">2222222222</td>
??? </tr>
??? <tr>
?????? <td width="10%">信息中心</td>
?????? <td align="left">3333333333</td>
??? </tr>
??? <tr>
?????? <td width="10%">电邮</td>
?????? <td align="left">44444444444</td>
??? </tr>
?? </table>
?? </div>
?? </div>

</body>
</html>

  相关解决方案