如何居中导航栏

我不知道如何集中导航栏请帮助！

HTML：

<html> 
<script src="jquery-1.6.1.min.js"></script> 
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script> 

<script type="text/javascript"> 

/*** 
    Simple jQuery Slideshow Script 
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) 
***/ 

function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    // use this to pull the images in the order they appear in the markup 
    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    // uncomment the 3 lines below to pull the images in random order 

    // var $sibs = $active.siblings(); 
    // var rndNum = Math.floor(Math.random() * $sibs.length); 
    // var $next = $($sibs[ rndNum ]); 


    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 

</script> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<body> 

    <div id="page-wrap"> 
     <table> 
     <tr> 
     <td><img src="images/logo.png"/></td> 
     <td>  <div id="slideshow"> 
      <img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" /> 
      <img src="/images/floete.jpg" alt="Slideshow Image 1" /> 
     </div></td> 
     </tr> 
     </table> 

     <div class="container"> 

    <ul id="minitabs"> 
    <li><a href="#" class="active">News</a></li> 
    <li><a href="#" >Fotos</a></li> 
    <li><a href="#">Mitglieder</a></li> 
    <li><a href="#">Jugend</a></li> 
    <li><a href="#">Gästebuch</a></li> 
    <li><a href="#">Intern</a></li> 
    </ul> 

    </div> 



     <br/> 
     <div><p>Pellentesque habitant morbi</p> 
     </div> 
    </div> 

</body> 
</head> 
</html>

的CSS：

#page-wrap { position: relative; width: 1024px; 
      margin: 50px auto; padding: 20px; 
      background: white; -moz-box-shadow: 0 0 20px black; 
      -webkit-box-shadow: 0 0 20px black; 
      box-shadow: 0 0 20px black; -webkit-border-radius:30px; 

      } 

#nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; 
    } 
#nav li { 
    float: left; } 
#nav li a { 
    display: block; 
    padding: 10px 56px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #069; 
    } 
#nav li a:hover { 
    color: #c00; 
    background-color: #fff; } 

p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; } 

#slideshow { 
    position:relative; 
    height:165px; 
} 

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
    height:146px; 
    width: 650px; 
} 

#slideshow IMG.active { 
    z-index:10; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 

.container { 
    padding: 1px; 
    margin: 40px 0px 40px 0; 
    background: #fff; 
    } 

#minitabs { 
    margin: 0; 
    padding: 0 0 40px 10px; 
    border-bottom: 1px solid #587DC6; 
    } 

#minitabs li { 
    margin: 0; 
    padding: 0; 
    display: inline; 
    list-style-type: none; 
    } 

#minitabs a:link, #minitabs a:visited { 
    float: left; 
    font-size: 40px; 
    line-height: 10px; 
    font-weight: bold; 
    margin: 0 10px 4px 10px; 
    padding-bottom: 2px; 
    text-decoration: none; 
    color: #C6C6C6; 
    } 

#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover { 
    border-bottom: 4px solid #B80028; 
    padding-bottom: 20px; 
    background: #fff; 
    color: #587DC6; 
    }

来源

2011-06-08 user547995

请修剪你的代码下降到仅相对于导航栏部分，或张贴的jsfiddle – Petah 2011-06-08 02:05:13

在使用的#nav css样式，我没有看到标识=“nav”在html中的任何地方。 – baraboom 2011-06-08 02:12:10

未使用#nav。 – user547995 2011-06-08 02:18:23

要居中你的资产净值，你需要做到以下几点：

CSS：

在#minitabs分配 text-align:center;
在#minitabs a:link, #minitabs a:visited删除或注释掉float:left;

这应围绕你的资产净值。你将不得不在你的导航中调整你的一些样式，让它看起来和以前一样，但至少它应该是你的起点。

查看的jsfiddle活动链接：http://jsfiddle.net/AvavN/

来源

2011-06-08 06:47:33 Dan

如何居中导航栏

回答

相关问题