关于div中表格位置的问题

登录

网上找的导航条，制作的过程遇到问题。里面我用div包裹表格制作的，但是div里面的表格只能水平居中无法垂直居中。

<!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;
设计视图发现已经居中了

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

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

潜意式 · 发表于 2017-4-1 18:33:54

给box1和table都加上浮动属性，float=left，然后设置table标签，margin-top值17px试试

[提问] 关于div中表格位置的问题

本帖子中包含更多资源

共1个回复最后回复于 2017-4-1 18:33

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 关于div中表格位置的问题

本帖子中包含更多资源

共1个回复 最后回复于 2017-4-1 18:33

共1个回复最后回复于 2017-4-1 18:33