页面居中问题总结

居中是页面布局是经常用到的，根据以往经验及网络资源，总结一下，以备新系统中参考。
1:table 居中问题
table中 style="vertical-align:middle" 并不能使table垂直居中。
style="text-align:center" 只能使table中的内容垂直居中。
1）table 水平居中的方法
（1）align="center" 只能使table表格水平居中，内容不居中。
<body>
    <table width="300" height="400" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF3333"    align="center">
      <td bgcolor="#F1F1F1">1</td>
      <td bgcolor="#F1F1F1">2</td>
      <td bgcolor="#F1F1F1">3</td>
    </tr>
    <tr>
      <td bgcolor="#F1F1F1">4</td>
      <td bgcolor="#F1F1F1">5</td>
      <td bgcolor="#F1F1F1">6</td>
    </tr>
    <tr>
      <td bgcolor="#F1F1F1">7</td>
      <td bgcolor="#F1F1F1">8</td>
      <td bgcolor="#F1F1F1">9</td>
    </tr>
</table>
</body>
（2)设置body属性style="text-align:center" ，可以使table 表格水平居中，内容垂直居中。
<body style="text-align:center" >
    <table width="300" height="400" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF3333"  >
<tr>
      <td bgcolor="#F1F1F1">1</td>
      <td bgcolor="#F1F1F1">2</td>
      <td bgcolor="#F1F1F1">3</td>
    </tr>
    <tr>
      <td bgcolor="#F1F1F1">4</td>
      <td bgcolor="#F1F1F1">5</td>
      <td bgcolor="#F1F1F1">6</td>
    </tr>
    <tr>
      <td bgcolor="#F1F1F1">7</td>
      <td bgcolor="#F1F1F1">8</td>
      <td bgcolor="#F1F1F1">9</td>
    </tr>
</table>
</body>
注：还可以用css的方式控制
body {
background: #00FF7F;
text-align: center; /* hack for ie center alignlayout */
}
而在firefox中，需要定义一个wrapper包裹器。
#wrapper{
background: Aqua;
width: 750px;
margin:auto; /* 或者 margin-left:auto;margin-right:auto; 或者margin: 0 auto; */
}
（3）另外一种居中的方法是在使用绝对定位的前提下，用left：50%+margin-left:-375px;的组合方式来使table居中,table 里的内容并不居中。
#wrapper2 {
position: absolute;
width:750px;
left:50%;
margin-left:-375px;
background: Orange; //table 边框颜色
}

posted @ 2009-07-20 20:23 kittywei 阅读(383) 评论(0) 收藏举报

刷新页面返回顶部

从小事做起，一步步来

页面居中问题总结

公告