论坛

标题: 关于div中表格位置的问题 [打印本页]

作者: tutu1668 时间: 2017-4-1 10:14
标题: 关于div中表格位置的问题
[attach]88351[/attach]
网上找的导航条，制作的过程遇到问题。里面我用div包裹表格制作的，但是div里面的表格只能水平居中无法垂直居中。
[attach]88353[/attach]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 100%;
height: 60px;
margin-top: 100px;
background-color: #FF6D70;/*添加背景色便于观察*/
}
table {
width: 1060px;
height: 34px;
border: 1px solid #000000;/*添加表格边框便于观察*/
margin:0 auto;
}

</style>
</head>

<body>
<div id="box1">
<table>
  <tbody>
<tr>
   <th scope="col"><a href="#">热门游戏</a></th>
   <th scope="col"><a href="#">战争</a></th>
   <th scope="col"><a href="#">恐怖</a></th>
   <th scope="col"><a href="#">僵尸</a></th>
   <th scope="col"><a href="#">沙盒</a></th>
   <th scope="col"><a href="#">休闲</a></th>
   <th scope="col"><a href="#">硬件杀手</a></th>
   <th scope="col"><a href="#">独立游戏</a></th>
   <th scope="col"><a href="#">国产游戏</a></th>
</tr>
  </tbody>
</table>
</div>
</body>
</html>

之后试过其他方法：div高度60px  表格是34px       、
写入精确代码：  margin-top: 14px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 14px;
[attach]88354[/attach]设计视图发现已经居中了

但是实际浏览器还是一样[attach]88355[/attach]左右居中了，上下没变

好吧，已经蛋-疼的我，寄出杀手锏  相对定位法
写入代码： position: relative;
            top: 14px;
[attach]88356[/attach] 垂直反向终于居中了，一直不明白为什么margin能控制表格左右能居中，上下怎么没用？

作者: 潜意式 时间: 2017-4-1 18:33
给box1和table都加上浮动属性，float=left，然后设置table标签，margin-top值17px试试

欢迎光临论坛 (http://bbs.qinxue.com/)