如何使导航栏居中

Question

Hy!嗨！

I don't know how to center the Nav-Bar please help!我不知道如何使导航栏居中，请帮忙！

HTML: 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: 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;
    }

Answer 1

To centre your nav you will need to do the following:要使您的导航居中，您需要执行以下操作：

CSS: CSS：

In #minitabs assign text-align:center;在#minitabs分配text-align:center;
In #minitabs a:link, #minitabs a:visited remove or comment out float:left;在#minitabs a:link, #minitabs a:visited删除或注释掉float:left;

That should centre your nav.那应该以您的导航为中心。 You will have to adjust some of your styles in your nav to get it to look the same as before but at least it should be a starting point for you.您必须在导航中调整一些 styles 以使其看起来与以前相同，但至少它应该是您的起点。

See live link on JSfiddle: http://jsfiddle.net/AvavN/请参阅 JSfiddle 上的实时链接： http://jsfiddle.net/AvavN/

如何使导航栏居中

问题描述

1 个解决方案

解决方案1
0 已采纳 2011-06-08 06:47:33

如何使导航栏居中

问题描述

1 个解决方案

解决方案1 0 已采纳 2011-06-08 06:47:33

解决方案1
0 已采纳 2011-06-08 06:47:33