菜单/徽标CSS：

#header2 h1 { /*Logo*/
  display:block;
  float:left;
  width:320px;
  height:125px;
  background:url('resources/images/logo.jpg') no-repeat 0 0;
  text-indent:-10000px;
}
/*#header2 h1 a:hover {
  background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}*/
#header2 h1 span.bg_fade { /*Logo hover*/
   position: absolute;
   top: 0;
   left: 0;
   height: 125px;
   width: 320px;
   background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}
#header2 ul { /*Menu*/
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url('resources/images/menu.jpg') no-repeat 0 0;
  list-style:none;
}
#header2 ul li { /*Menu part*/
  display:block;
  float:left;
  height:125px;
  text-indent:-10000px;
}
#logo-nav {
  margin-right:10px;
}
#home {
  width:160px;
}
#about {
  width:137px;
}
#work {
  width:129px;
}
#contact {
  width:210px;
}
#header2 ul li a {
  display:block;
  width:100%;
  height:100%;
  outline: 0 !important;
  -moz-outline-style: 0 !important;
  -webkit-outline: 0 !important;
  -webkit-outline-style: 0 !important;
}
#home a:hover {
  background:url('resources/images/menu.jpg') no-repeat 0 -125px;
}
#about a:hover {
  background:url('resources/images/menu.jpg') no-repeat -160px -125px;
}
#work a:hover {
  background:url('resources/images/menu.jpg') no-repeat -297px -125px;
}
#contact a:hover {
  background:url('resources/images/menu.jpg') no-repeat -426px -125px;
}

菜单/徽标HTML：

<div id="header2" style="height:465px;">
    <div id="logo-nav" style="float:left;margin:0;">
      <h1><a href="index.php">WeeBuild Web Design</a></h1>

    <ul id="nav">

      <li id="home"><a href="index.php" title="Click here to go to our homepage.">Home</a></li>

      <li id="about"><a href="about.php" title="Learn more about us.">About</a></li>

      <li id="work"><a href="work.php" title="Check out some of the work we've done.">Work</a></li>

      <li id="contact"><a href="contact.php" title="Any questions? Click here to contact us.">Contact</a></li>

   </ul>
    </div>

关于如何让它居中的任何想法？

Answer 1

它实际上并不是那个被标记的标题......有一些元素会弄乱布局

首先在html中使用id＃logo-nav。

在div上创建一个样式标记

看起来像这样：

style="float:left;margin:0;"

应该是这样的：

style="margin:0 auto;"

这将完美地将徽标和菜单置于中心位置。菜单推动该页面上容器的最右侧和左侧的徽标。

然后在页脚的CSS中使用此类

#footer {
  clear:both;
  width:955px;
  border-top:1px dashed #094e64;
}

应该是

#footer {
  clear:both;
  border-top:1px dashed #094e64;
}

现在它正确占据了其父容器的100％。

然后回到html，在div中包装#boxContainer，＃leftCol和#newsletter。

赋予该div一个固定的宽度，与包裹元素的水平空间完全匹配。

将margin: 0 auto;作为该div的样式。

现在一切都应该集中。

作为一个提示：它因为你对页面上的某些东西使用过多的标记（你有一个非常多的包装器/容器）和太少的其他布局东西（实际的内容div不包含）任何其他分组div，你使用brs在元素之间放置间距

如何让我的菜单/徽标居中而不是一直向右？

菜单/徽标CSS：

菜单/徽标HTML：

1 个答案: