Question

我无法将我的网站上的水平导航栏设置为中心，此时它排在右侧。网站网址为：www.vintagemagpies.tumblr.com。这是CSS：

    #nav {
    width:1000px;
    background-color: #FFFFFF;
    text-align: center;
    display:table;
    padding:0; 
    margin:0 auto; 
    list-style-type:none;
    white-space:nowrap;}
    #nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
    }
    #nav li {
float: left; }
    #nav li a {
display: block;
padding: 8px 35px;
text-decoration: none;
    font-family: EnglishEssay;
color: #AAAAAA;
    font-size: 16pt;}
    #nav li a:hover {
color: #000000;
background-color: #fff; }

和HTML：

    <div id="nav">
    <ul>
    <li><a href="http://vintagemagpies.tumblr.com/about">about</a></li>
    <li><a href="http://stores.ebay.co.uk/VINTAGE-MAGPIES">shop</a></li>
    <li><a href="http://vintagemagpies.tumblr.com/contact">contact</a></li>
    <li><a href="https://twitter.com/#!/vintagemagpies">twitter</a></li>
    <li><a href="http://www.facebook.com/vintagemagpies">facebook</a></li>
    <li><a href="http://fashionfinder.asos.com/user/Vintage%20Magpies/profile">
    fashionfinder</a>
    </li>
    </ul>
    </div>

尝试将整个块放在屏幕上，以上的主题CSS工作得很好，但我最近改变了，现在它排在右边。

如果问题出现在代码的其他地方，那么这一切都是：

    <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>{block:SearchPage}
    Search results for "{SearchQuery}" - {/block:SearchPage}
    {block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />


<style type="text/css">


    body {
    background: {color:Background} url('{image:Background}');
    margin: 30px 0px 0px 340px;
    font: Normal 13px {font:Body};
    color: #666;
    }

    #container {
    width: 520px;
    height: 100%;
    margin: 15px 0px 15px 0px;
    padding: 10px;
    background-color: #FFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    #header h1 {
    font: 50px {font:Title};
    margin: 0px 0px -5px -230px;
    }

    #header h1 a {  
    color: {color:Title};
    text-decoration: none;
    }

    #header h1 a:hover {
    color: {color:Title Hover};
    }

    #nav {
    width:1000px;
    background-color: #FFFFFF;
    text-align: center;
    display:table;
    padding:0; 
    margin:0 auto; 
    list-style-type:none;
    white-space:nowrap;}
    #nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
    }
    #nav li {
float: left; }
    #nav li a {
display: block;
padding: 8px 35px;
text-decoration: none;
    font-family: EnglishEssay;
color: #AAAAAA;
    font-size: 16pt;}
    #nav li a:hover {
color: #000000;
background-color: #fff; }


    #right {
    position: absolute;
    left: 895px;
    font: 12px {font:Body};
    line-height: 15px;
    width: 212px;
    background-color: #fff;
    padding: 10px;
    color: {color:Description};
    margin: 15px 0px 0px 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }


    #left {
    position: absolute;
    left: 105px;
    font: 12px {font:Body};
    line-height: 15px;
    width: 200px;
    background-color: #fff;
    padding: 10px;
    color: {color:Description};
    margin: 15px 0px 0px 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    h1 {
    color: {color:Title};
    margin: 0px 0px 10px 0px;
    font-weight: normal;
    font-size: 40px;
    letter-spacing: -1px;
    }

    h1 a {
    color: {color:Title};
    text-decoration: none;
    }

    #description {
    color: {color:Description};
    font-size: 9px;
    line-height: 18px;
    padding-right: 70px;
    margin-bottom: 5px;
    }

    .date {
    margin: 10px 0px 10px 0px; 
    padding: 5px 5px 5px 10px;
    font: 12px {font:Date};
    text-align: left;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: {color:Date Background};
    }

    .date a {
    color: {color:Date};
    text-decoration: none;
    }

    .date a:hover {
    color: {color:Date Hover};
    text-decoration: none;
    }

    .sideheader {
    margin: 10px 0px 15px 0px;
    color: {color:Sidebar Header};
    font-size: 12px;
    text-align: left;
    letter-spacing: 0px;
    text-transform: uppercase;
    border-bottom: solid 1px #444;
    }


    a {
    text-decoration: none;
    color: {color:Links};
    }

    a:hover {
    color: {color:Links Hover};
    text-decoration: none;
    }


    .post-footer p.reblogged {
    font-size:10px;
    color: {color:Text Color};
    padding:5px 0;
    }

    .post-footer p.reblogged a {
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center left;
    padding: 2px 0 2px 18px;
    }

    div.post {
    margin: 0px 10px 40px 10px;
    position: relative;
    }

    div.post img.permalink {
    border-width: 0px;
    width: 23px;
    height: 9px;
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    }

    div.post:hover img.permalink {
    display: block;
    }


    div.post h2 {
    font: 18px {font:Body};
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0px 0px 10px 0px;
    }

    div.post h2 a {
    color: {color:Text Color}; 
    text-decoration: none;
    }

    div.post h2 a:hover {
    color: {color:Links Hover};
    text-decoration: none;
    }


              /* Regular Post */

    .post .regular {
    font-size: 12px;
    color: {color:Text Color};
    line-height: 17px;
    text-align: justify;
    }

    .post .regular img {
    max-width: 100%;
    }

    .post .regular blockquote {
    font-style: italic;
    }

       /* Photo Post */

    div.post div.photo img {
    border-width: 0px;
    }

    div.post div.photo div.caption {
    font-size: 12px;
    text-align: justify;
    margin: 10px 0px 0px 0px;
    color: {color:Text Color};
    }

    div.post div.photo div.caption a {
    color: {color:Links};
    }

    div.post div.photo div.caption a:hover {
    color: {color:Links Hover};
    text-decoration: none;
    } 

         /* Quote Post */

    div.post div.quote {
    padding: 0px 15px 0px 15px;

    }

    div.post div.quote span.quote {
    font-size: 20px;
    color: {color:Text Color};
    line-height: 22px;
    }

    div.post div.quote div.source {
    font-size: 13px;
    text-align: right;
    color: {color:Text Color};
    }

    div.post div.quote div.source a {
    color: {color:Links};
    }

    div.post div.quote div.source a:hover {      
    color: {color:Links Hover};
    }

       /* Link Post */

    div.post div.link {
    color: #222;
    margin-top: 15px;
    font-size: 18px;
    letter-spacing: -1px;
    }

    div.post div.link a.link {
    margin-top: 10px;
    color: {color:Post Link};
    padding: 5px;
    background: {color:Post Link Background};
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    div.post div.link a:hover.link {
    color: {color:Post Link Hover};
    }

    div.post div.link div.description {
    margin-top: 20px;
    font-size: 12px; 
    letter-spacing: 0px;
    line-height: 17px;
    text-align: justify;
    color: {color:Text Color};
    }

    .post .link span.description blockquote {
    font-style: italic;
    }

      /* Conversation Post */

    div.post div.conversation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px 0px 0px 1px;
    }

    div.post div.conversation ul li {
    font-size: 12px;
    padding: 4px 0px 4px 8px;
    color: #fff;
    margin-bottom: 1px;
    }

    div.post div.conversation ul li span.label {
    font-weight: bold;
    }
    div.post div.conversation ul li.odd {
    background-color: {color:Conversation Background 1};
    }

    div.post div.conversation ul li.even {
    background-color: {color:Conversation Background 2};
    }

    /* Audio Post */

    div.post div.audio div.caption {
    margin: -60px 0px 0px 0px;
    color: #222222;
    font-size: 12px;
    text-align: justify;
    }

    div.post div.audio div.caption a {
    color: #6DA856;
    }

    div.post div.audio div.caption a:hover {
    color: #F7C852;
    }

    #radio {
    margin: auto;
    padding: 86px 0px 0px 87px;
    width: 310px;
    height: 189px;
    background: transparent
    url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png)
    no-repeat;
    }

    /* Video Post */

    div.post div.video div.caption {
    margin: 10px 0px 0px 0px;
    color: #222;
    font-size: 12px; 
    text-align: justify;
    }

    div.post div.video div.caption a {
    color: {color:Links};
    }

    div.post div.video div.caption a:hover {
    color: {color:Links Hover};
    }


    #navigation {
    font-size: 14px;
    text-transform: uppercase;
    color: {color:Text Color};
    }

    #navigation a {
    color: {color:Links};
    text-decoration: none;
    }

    #navigation a:hover {
    color: {color:Links Hover};
    text-decoration: none;
    }

    #credits {
    margin-top: 11px;
    font-size: 8px;
    text-align: left;
    letter-spacing: 1px;
    color: {color:Text Color};
    }

    #credits a {
    color: {color:Links};
    }

    #credits a:hover {
    color: {color:Links Hover};
    text-decoration: none;
    }

    #comment {
    display: inline;
    letter-spacing: normal;
    font-size: 11px;
    text-align: right;
    margin: 0px 0px 0px 10px;      
    }

    #comment a {
    text-decoration: none;
    color: {color:Comment};
    }

    #comment a:hover {
    text-decoration: none;
    color: {color:Comment Hover};
    }

    .following {
    margin-top: 5px;
    margin-bottom: 5px;

    }

    .following a img {
    border: 1px solid {color:Flickr};
    padding: 1px;
    margin: 1px;
    }

    .following a img:hover {
    border: 1px solid {color:Flickr Hover};
    padding: 1px;
    margin: 1px;
    }

    #twitter {
    color: {color:Text Color};
    font-family: 'Lucida Grande', Gill Sans MT, sans-serif;
    font-size: 10px;
    text-align: left;
    width: 225px;
    margin: 0px 0px 0px -35px;
    padding: 0px 0px 0px 0px;
    }

    #twitter ul {
    list-style-type:none;
    }

    #twitter li {
    margin-bottom: 5px;
    border-bottom: 1px dotted;
    padding-bottom: 5px;
    }

    #twitter a {
    color: {color:Links};
    }

    #flickr {
    width:220px;
    height:154px;
    padding: 0px 0px 0px 0px;
    margin: 10px 10px -40px 15px;
    }

    #flickr img {
    float: left;
    margin:0 5px 5px 0px;
    background: white;
    padding: 3px;
    width: 50px;
    height: 50px;
    border: 1px solid {color:Flickr};   
    }

    #flickr  a img:hover {
    border: 1px solid {color:Flickr Hover};
    }

    #tags {
    float: right;
    text-align: right;
    color: {color:Text Color};
    font-size: 10px;
    margin: -25px 0px 30px 0px
    }

    ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: solid 1px #ccc;
    }

    ol.notes li.note {
    border-top: solid 1px #ccc;
    padding: 10px;
    }

    ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    }

    ol.notes li.note span.action {
    font-weight: bold;
    }

    ol.notes li.note .answer_content {
    font-weight: normal;
    }

    ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
    }

    ol.notes li.note blockquote a {
    text-decoration: none;
    }

    {CustomCSS}

    </style>
    {block:Description}
    <meta name="description" content="{MetaDescription}" />{/block:Description}

    <div id="header">
        <h1>
    <a href="/"><center><img src="https:/" alt="MUSINGS" width= "1000px" 
    align= "center"/></center></a></h1>
    </div>
    <div id="nav">
    <ul>
    <li><a href="http://vintagemagpies.tumblr.com/about">about</a></li>
    <li><a href="http://stores.ebay.co.uk/VINTAGE-MAGPIES">shop</a></li>
    <li><a href="http://vintagemagpies.tumblr.com/contact">contact</a></li>
    <li><a href="https://twitter.com/#!/vintagemagpies">twitter</a></li>
    <li><a href="http://www.facebook.com/vintagemagpies">facebook</a></li>
    <li><a href="http://fashionfinder.asos.com/user/Vintage%20Magpies/profile">
    fashionfinder</a></li>
    </ul>
    </div>
    </head>

    <body>


    <!-- Left Sidebar -->

    <div id="left">

    <!-- Description -->

    <p class="sideheader"><strong>About</strong></p>

    {block:Description}
       {Description}
    {/block:Description}


    </div>

    <!-- Right Sidebar -->


    <div id="right"> 

    <!-- Search -->


    <p class="sideheader"><strong>Find</strong></p>
    <center>
    <form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}"/>
    <input type="submit" value="Search"/>
    </form>

    {block:SearchPage}<center><font size="3">
    {SearchResultCount}</font> <font size="1">Result(s) found</font></center>
    {/block:SearchPage} <br>
    </center>


    <div id="credits">
    Powered by <a href="http://tumblr.com">Tumblr</a>
    </div>


    </div>





    <!-- Permalink Dates -->


    <div id="container">

    {block:Posts}


        {block:NewDayDate}
    <div class="blogtitletwo">

    </div>
            <div class="date">
                <a href="{Permalink}">{DayOfMonth} {Month} {ShortYear}</a>
                <div id="comment">

    <a href="{Permalink}#disqus_thread">Comments</a>
    {block:NoteCount}  | 
    <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
    </div>
            </div>
    {/block:NewDayDate}

    {block:SameDayDate} 
    <div class="blogtitletwo">

    </div>
            <div class="date">
               <a href="{Permalink}">Posted: {12Hour}:{Minutes} {CapitalAmPm}</a>
               <div id="comment">

    <a href="{Permalink}#disqus_thread">Comments</a>
    {block:NoteCount}  | 
    <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
    </div>
            </div>
    {/block:SameDayDate}


    <!-- Begin Tumblr Posts -->


        <div class="post">

    <!-- Text Posts -->


            {block:Regular}
          <div class="regular">
            {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                    {Body}
    </div>
             {/block:Regular}


    <!-- Photo Posts -->


            {block:Photo}
          <div class="photo">
                 <center>
               {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}

                 </center>
                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}   
                    </div>
            {/block:Photo}


    <!-- Quote Posts -->


            {block:Quote}
                <div class="quote">
                    <span class="quote">
                        <strong>&#147;</strong> {Quote}
                    </span>
               {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
                </div>
            {/block:Quote}


    <!-- Link Posts -->

            {block:Link}
                <div class="link">
                     <center><a href="{URL}" class="link" {Target}>{Name}</a></center>
                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
                </div>
            {/block:Link}

    <!-- Chat Posts -->

            {block:Conversation}
                <div class="conversation">
               {block:Title}<h2><a href="{Permalink}">{Title}</a></h2> {/block:Title}
                    <ul>
                      {block:Lines}
                        <li class="{Alt}">
                         {block:Label}<span class="label">{Label}</span> {/block:Label}
                       {Line}
                     </li>
                  {/block:Lines}
                </ul>
              </div>
            {/block:Conversation}


    <!-- Audio Posts -->

            {block:Audio}
                <div class="audio">
                     <div id="radio">
                    {AudioPlayerBlack}
                       </div>
                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Audio}


    <!-- Video Posts -->

            {block:Video}
                <div class="video">
                    {Video-500}
                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Video}
        </div>



    <!-- Reblogging Information -->


    <div class="post-footer">


         {block:RebloggedFrom}

    <p class="reblogged">
    Reblogged: <a href="{ReblogParentURL}" 
    style="background-image:         
    url({ReblogParentPortraitURL-16});">
    {ReblogParentName}</a></p>

              {/block:RebloggedFrom}


    <!-- Tagging Information -->

    {block:HasTags}
    <div id="tags"> 
         Tags: 
    {block:Tags} <a href="{TagURL}">{Tag}</a> {/block:Tags}      
    </div>
    {/block:HasTags}

    </div>


    {block:PostNotes} 
    {PostNotes}
    {/block:PostNotes}


    {/block:Posts}


{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus">
<div id="disqus_thread"></div>
    <script type="text/javascript"      
    src="http://disqus.com/forums/
    {text:Disqus Shortname}/embed.js"></script>
    <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">
    View the discussion thread.</a>   
    </noscript>
</div>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
    if(links[i].href.indexOf('#disqus_thread') >= 0) {
    query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
    }
    }
    document.write('<script charset="utf-8"type="text/javascript"

    src="http://disqus.com/forums/
    {text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}















    <!-- Page Navigation -->

         <div id="navigation">
    <p align="center">
       {block:PreviousPage}
            <a href="{PreviousPage}">&larr; Previous</a>
        {/block:PreviousPage}
    &#8226;
        {block:NextPage} 
       <a href="{NextPage}">Next &rarr;</a>
        {/block:NextPage}       
    </p>
    </div>
    </body>

希望有人可以提供帮助。还试图在博客文章之间休息，但那是另一天！感谢

Answer 1

请将以下css添加到#nav

位置：相对; 左：-153px;

由于

Answer 2

这是一个提示：我不是专业的html / css网页设计师，但我使用这种方法。您可以使用margin:0 auto对任何内容进行居中，或将其放在任何div中以使其与中心对齐：<div align="center"></div>。

对于博客文章之间的中断，您可以使用<br>或在css中使用：

margin-top:10px;

干杯。

Tumblr中的水平导航栏问题（CSS / HTML）

2 个答案: