Question

我想在header元素的中间显示一个CSS水平菜单，并确保在调整浏览器窗口大小时它保持在中间位置。我当然尝试margin: auto;，但它对我也不起作用。

jsfiddle code

header .center {
  background: url(../images/header-center.png) no-repeat;
  width: 510px;
  height: 100%;
  /*margin: auto;*/
}

Answer 1

除margin: 0 auto;之外，您还需要删除#navigation和position: absolute;

来更改left: 260px;

另请注意，您为菜单#navigation提供了更大的尺寸，并为包含.center类的标题提供了更小的尺寸。

完全解决您的问题：

header .center {
  background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat;
  width: 510px;
  height: 100%;
  margin: 0 auto;
}

#navigation {
  width: 705px;
  height: 50px;
  overflow: visible;
}

你的代码无法正常工作的原因是因为你只是在做margin: auto这应该在技术上有效，因为它会给你的：top，right，bottom和left边缘auto，而这是一切正常，你的#navigation仍有位置属性，不会让你居中。

所以最后一课：

每次你声明margin，padding，border之类的内容......你可以对他们做两种类型的速记符号来照顾所有方面。

margin: 0 auto表示：保证金上限和下限0以及保证金左右自动。

Answer 2

你去吧

header .center {background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat; width: 510px; height: 100%; margin: 0 auto;}

#navigation {width: 705px;height: 50px; left: 50%; overflow: visible; margin-left: -255px;}

这应该始终是父容器宽度510px的一半

如何将菜单置于中间位置？

jsfiddle code

2 个答案:

完全解决您的问题：

所以最后一课：