基本 HTML 为什么导航栏无法居中？

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

我做错了什么？集装箱有问题吗？

<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

您需要将ul的宽度从1200px减少到400px

演示http://jsfiddle.net/LstNS/38/

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

试试这个，它可以在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;
}

相关内容

最新更新

热门标签：