Question

我似乎无法将导航栏和中间的徽标放在页面的中心。

我做错了什么？容器是问题吗？

<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
  <header>
      <div id="header" class="clearfix">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="music.html">MUSIC</a></li>
            <li>
              <div class="headerimage"><img src="images/header.png" alt="Richi Rich Logo"></div>
            </li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="index.html">GALLERY</a></li>
        </ul>
    </div><!--end header-->

  <div class="footer"> Richard Medhurst © 2013</div>
</div>

</body>
    </html>

我的.css样式表在这里：https://www.dropbox.com/s/j7r373e5qwx0vji/style.css

Answer 1

您需要将ul的宽度从1200px缩小到400px

DEMO http://jsfiddle.net/LstNS/38/

#header ul { 
  margin:0 auto; 
  width:400px; 
  list-style: none; 
  *zoom: 1; 
}

Answer 2

试试这个，它适用于1200px及以上的显示器。这是一个 FIDDLE

#header li { 
  display:inline-block;
  height: 160px; /* Height of the image */
  vertical-align: top;
  margin-top: -3px;

}
.headerimage img {
  margin-top: -55px;
  /* For demo purpose */
  width: 500px;
  height: 160px;
}

基本HTML为什么我不能将导航栏放在中心位置？

2 个答案: