Question

我忙于这个新网站的事情，我遇到了一个问题。通常，在制作菜单时，我只会使用整个空间，例如100% width和100px height，但现在，我只需要其中的一部分，因此菜单旁边都有一个空格两侧。

我试图将带有菜单的方块放到页面的绝对顶部，这是最明显的解决方案：

position:absolute;
top:0;

但现在，广场也被移动到页面的绝对左侧，而不是我希望它居中，但我无法到达那里。这是我的CSS：

body, html {    
    background-color: #ecf0f1;
    position: absolute;
    top: 0;
    margin: 0 auto;
}

.navbox {
    background-color: #000;
    height:100px;
    width: 700px;
    margin: 0 auto;
}

有没有人有解决方案？

Answer 1

 position:absolute;
 top:0;
 left:0;
 right:0;

向左和向右调整以适合您想要的边距。

Answer 2

您可能希望将左右设置为百分比，使用50％将两者都集中在一起：

#menu {
  position:absolute;
  top:0;
  width: 70px;
  height:180px;
  left: 50%;
  right: 50%;
  background-color: red;
}

此外，如果您没有使用绝对定位，您可以使用此左边距和右边距进行相同的操作。

jsfiddle

身体居中页面{position：Absolute;}

2 个答案: