3

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

jsfiddle代码

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

2 回答 2

5

除了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技术上应该起作用的事情，因为它为您的：顶部、右侧、底部和左侧提供了一个边距，auto虽然这一切都很好，但您#navigation仍然具有不允许的位置属性你把它居中。

所以就像最后一课：

每次您声明诸如margin,等之类的内容时padding，border您都可以对它们做两种速记符号来处理所有方面。

margin: 0 auto意思是：margin top and bottom 0 和margin left and right auto。

于 2013-08-10T01:12:20.427 回答
-1

干得好

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 的一半

于 2013-08-10T08:01:29.130 回答