Html 如何使导航条居中_Html_Css

Html 如何使导航条居中

html css

Html 如何使导航条居中,html,css,Html,Css,嘿我不知道如何使导航条居中，请帮忙 HTML: 要居中导航，您需要执行以下操作： CSS: 在迷你选项卡中指定文本对齐：居中；在迷你标签a:链接中，迷你标签a:已访问删除或注释出浮动：左；那应该是你的导航中心。你必须在导航中调整一些样式，使其看起来与以前一样，但至少这应该是你的起点请查看JSFIDLE上的live链接：请将您的代码精简为仅与导航栏相关的部分，或发布JSfiddle。在使用nav css样式的地方，我在html中的任何地方都看不到id=nav。 <html>

嘿

我不知道如何使导航条居中，请帮忙

HTML:

要居中导航，您需要执行以下操作：

CSS:

在迷你选项卡中指定文本对齐：居中；在迷你标签a:链接中，迷你标签a:已访问删除或注释出浮动：左；那应该是你的导航中心。你必须在导航中调整一些样式，使其看起来与以前一样，但至少这应该是你的起点

请查看JSFIDLE上的live链接：

请将您的代码精简为仅与导航栏相关的部分，或发布JSfiddle。在使用nav css样式的地方，我在html中的任何地方都看不到id=nav。

<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>

#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;
    }