css代碼如何把導航中間

Question

我正在開發一個網頁，其中屏幕將適合移動也。

的style.css

/* GENERAL STUFF */ 

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width: 100%; 
    font-family: 'Cabin', sans-serif; 
} 

/*.clear { 
    clear: both; 
}*/ 

.clear:after { 
    display: block; 
    clear: both; 
    visibility: hidden; 
    content: ""; 
    height: 0; 
} 

/* HEADER BLOCK */ 

.header-background { 

    padding-top: 50px; 
} 

.header-background > div:first-child { 
    width: 100%; 
    background: #232323; 
} 

.header { 
    background: #232323; 
    color: #B2B2B2; 
    width: 80%; 
    margin: auto; 
} 

.header a { 
    text-decoration: none; 
    color: white; 
} 

.header a:active { 
    color: #19A3A3; 
} 






#nav { 
    position: relative; 
    display: block; 
    height: 55px; 
    line-height: 55px; 
    width: 100%; 
    max-width: none; 
    margin: 0; 
    background: #333; 

    z-index: 1; 
    border-bottom: 1px solid #666; 
    font-weight: 600; 
    font-family: helvetica, arial, sans-serif; 
    font-size: 14px; 
} 

#nav, #nav * { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

.nav-item { 
    color: #fff; 
    text-transform: uppercase; 
    text-decoration: none; 
} 


/* Desktop */ 

#desktop-nav .nav-item { 
    display: block; 
    padding: 0 20px; 
    float: right; 

    -webkit-transition: color 200ms linear; 
    -moz-transition: color 200ms linear; 
    -ms-transition: color 200ms linear; 
    -o-transition: color 200ms linear; 
    transition: color 200ms linear; 
} 

#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active { 
    opacity: 0.7; 
} 


/* Mobile */ 

#mobile-nav { 
    position: absolute; 
    top: 55px; 
    right: 0; 
    left: 0; 
    opacity: 0; 
    visibility: hidden; 

    -webkit-transition: visibility 0ms linear 200ms, opacity 200ms linear; 
    -moz-transition: visibility 0ms linear 200ms, opacity 200ms linear; 
    -ms-transition: visibility 0ms linear 200ms, opacity 200ms linear; 
    -o-transition: visibility 0ms linear 200ms, opacity 200ms linear; 
    transition: visibility 0ms linear 200ms, opacity 200ms linear; 
} 

#mobile-nav .nav-item { 
    display: block; 
    width: 100%; 
    padding-left: 30px; 
    background: #333; 
    border-bottom: 1px solid #666; 
    opacity: 0; 

    -webkit-transition: background 200ms linear, color 200ms linear; 
    -moz-transition: background 200ms linear, color 200ms linear; 
    -ms-transition: background 200ms linear, color 200ms linear; 
    -o-transition: background 200ms linear, color 200ms linear; 
    transition: background 200ms linear, color 200ms linear; 
} 

#mobile-nav .nav-item:hover, #mobile-nav .nav-item:active { 
    background: #666; 
    color: white; 
} 

#mobile-nav .nav-item:last-child { 
    border-bottom: none; 
} 


/* Toggles */ 

.nav-toggle { 
    position: absolute; 
    left: -100px; 
    right: 0; 
    line-height: 0px; 
    border: none; 
    cursor: pointer; 

    height: 22px; 
    width: 22px; 
    margin: 16px 22px; 

    background-position: center; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-image: url('../images/menu-icon.svg'); 
    background-color: #333; 
} 

.nav-toggle:hover { 
    opacity: 0.7; 
} 

#open-toggle:focus { 
    left: -100px; 
} 

#open-toggle:focus ~ #close-toggle { 
    left: auto; 
} 

#open-toggle:focus ~ #mobile-nav { 
    visibility: visible; 
    opacity: 1; 

    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
} 

#open-toggle:focus ~ #mobile-nav .nav-item { 
    opacity: 1; /* Avoid initial fade in of content, have to use opacity because using visibility breaks functionality */ 
} 


/* Logo */ 

#logo { 
    position: absolute; 
    padding: 0 20px; 
    font-size: 21px; 
    font-weight: bold; 
    cursor: pointer; 
    color: #fff 
} 

#logo:hover { 
    opacity: 0.7; 
} 




















.header-logo { 
    font-family: 'Indie Flower', cursive; 
    font-size: 36px; 
    padding: 8px; 
    float: left; 
} 

.header-notes { 
    padding: 100px 0; 
    width: 100%; 
    color: white; 
} 

.header-notes div { 
    margin: auto; 
    width: 50%; 
    text-align: center; 
    font-size: 40px; 
} 

span.green { 
    color: #19A3A3; 
} 

/* PAGE MAIN CONTENT */ 

.content { 
    text-align: center; 
    padding-top: 50px; 
} 

.content h2 { 
    color: #19A3A3; 
    padding: 25px; 
} 

.content p { 
    padding: 25px 15%; 
} 

.hr-background { 
    background: url(../img/hr-bg.png); 
    width: 229px; 
    height: 14px; 
    margin: auto; 
} 

.photos { 
    margin: auto; 
    margin-top: 30px; 
    margin-bottom: 40px; 
    display: inline-block; 
    width: 70%; 
} 

.photos ul li { 
    float: left; 
    list-style: none; 
    padding: 1%; 
    width: 23%; 
} 

.photos ul li img { 
    width: 100%; 
} 

.photos ul li:hover h3 { 
    color: #19A3A3; 
} 

.photos a { 
    text-decoration: none; 
    color: black; 
} 

.photos h3 { 
    padding: 15px 0; 
    font-size: 16px; 
} 

.photos p { 
    font-size: 13px; 
    padding: 0; 
} 

.slider { 
    display: block; 
    margin: auto; 
    margin-bottom: 30px; 
    width: 60px; 
} 

.slider ul { 
    height: 8px; 
} 

.slider ul li { 
    float: left; 
    list-style: none; 
    background: url(../img/slide_point_bg.png) no-repeat; 
    width: 8px; 
    height: 8px; 
    margin-left: 5px; 
    border-radius: 100%; 
} 

.slider ul li.active { 
    background: url(../img/slide_point_active_bg.png) no-repeat; 
} 

.slider ul li:hover { 
    box-shadow: 0 0 0.5em black; 
} 

/* FOOTER */ 

.footer { 
    background: #062134; 
    color: white; 
    display: table; 
    font-size: 14px; 
} 

.footer .column-title { 
    margin-bottom: 30px; 
    font-weight: bold; 
} 

.footer > div { 
    display: table-row; 
} 

.footer > div > div { 
    display: table-cell; 
    width: 23%; 
    padding-top: 50px; 
    padding-bottom: 50px; 
} 

.footer > div > div:first-child { 
    padding-left: 5%; 
    padding-right: 1%; 
} 

.footer > div > div:nth-child(2) { 
    padding-left: 1%; 
    padding-right: 1%; 
} 

.footer > div > div:nth-child(3) { 
    padding-left: 1%; 
    padding-right: 20%; 
} 

.footer p { 
    line-height: 200%; 
} 

.footer input { 
    display: block; 
    float: left; 
    background: #062134; 
    /*border: 2px solid white;*/ 
    border-top: 2px solid white; 
    border-right: 0; 
    border-bottom: 2px solid white; 
    border-left: 2px solid white; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    /*padding: 10px;*/ 
    width: 75%; 
    color: white; 
    height: 36px; 
    text-indent: 10px; 
} 

::-webkit-input-placeholder { 
    color: #1F3748; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: #1F3748; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: #1F3748; 
} 

:-ms-input-placeholder { 
    color: #1F3748; 
} 

.footer button { 
    float: left; 
    background: #062134 url(../img/arrow-input-bg.png) 10px 10px no-repeat; 
    height: 40px; 
    width: 40px; 
    height: 40px; 
    border-top: 2px solid white; 
    border-right: 2px solid white; 
    border-bottom: 2px solid white; 
    border-left: 0; 
    border-left: 0; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    margin-bottom: 30px; 
} 

/*.row-2 p { 
    clear: left; 
}*/ 

.footer input:focus { 
    outline: 0; 
    background: #4D7EC9; 
} 

.footer input:hover { 
    box-shadow: 0 0 0.5em white; 
} 

.footer button:hover { 
    background-color: blue; 
} 

.footer button:focus { 
    outline: 0; 
} 

.list-of-resources { 
    display: table; 
} 

.list-of-resources > div { 
    display: table-row; 
} 

.list-of-resources > div > div { 
    display: table-cell; 
    padding: 5px 0; 
} 

.list-of-resources > div > div:last-child { 
    padding: 0 0 0 30px; 
} 

.list-of-resources a { 
    text-decoration: none; 
    color: white; 
} 

.list-of-resources a:hover { 
    color: tomato; 
} 

@media screen and (max-width:1000px) { 

    /* HEADER */ 

    .header-background { 
/*  height: 300px;*/ 
     padding-top: 0; 
    } 

    .header-notes { 
     padding: 50px 0; 
    } 

    .header-notes > div { 
     width: 70%; 
     font-size: 35px; 
    } 

    .header-background > div:first-child { 
     top: 0; 
    } 

    .header { 
     background: #232323; 
     color: #B2B2B2; 
     width: 100%; 
     margin: auto; 
    } 

    .header-logo { 
     font-family: 'Indie Flower', cursive; 
     font-size: 36px; 
     padding-left: 30px; 
     float: left; 
    } 

    /* nav { 
     float: initial; 
     clear: both; 
    } 

    nav ul { 

     list-style: none; 
     padding: 15px; 
    } 

    nav ul li { 
     display: inline; 
     padding: 15px; 
    } */ 

    /* CONTENT */ 

    .photos { 
     width: 90%; 
    } 

} 

@media screen and (max-width:900px) { 

    .footer > div > div { 
     display: table-cell; 
     width: 28%; 
     padding-top: 50px; 
    } 

    .footer > div > div:first-child { 
     padding-left: 5%; 
     padding-right: 1%; 
    } 

    .footer > div > div:nth-child(2) { 
     padding-left: 1%; 
     padding-right: 1%; 
    } 

    .footer > div > div:nth-child(3) { 
     padding-left: 1%; 
     padding-right: 5%; 
    } 

} 

@media screen and (max-width:700px) { 

    .footer > div > div { 
     display: block; 
     float: left; 
     width: 42%; 
    } 

    .footer > div > div:last-child { 
     clear: both; 
     padding-left: 5%; 
     padding-top: 10px; 
    } 


    #desktop-nav { 
     display: none; 
    } 

    #open-toggle { 
     left: auto; 
    } 


} 

@media screen and (max-width:600px) { 

    .photos ul li { 
     padding: 5%; 
     width: 40%; 
    } 

    .photos ul li:nth-child(3n+3) { 
     clear: left; 
    } 

    .photos h3 { 
     padding: 15px 0; 
     font-size: 18px; 
    } 

    .photos p { 
     font-size: 16px; 
     padding: 0; 
    } 

    .footer > div > div { 
     width: 90%; 
    } 

    .footer > div > div:nth-child(2) { 
     clear: both; 
     padding-left: 5%; 
     padding-top: 10px; 
    } 

} 

@media screen and (max-width:480px) { 

    .header-logo { 
     font-size: 26px; 
     padding: 8px; 
    } 

    .header-notes > div { 
     width: 80%; 
     font-size: 26px; 
    } 

    nav ul { 
     list-style: none; 
     padding: 5px; 
    } 

    nav ul li { 
     display: inline; 
     padding: 5px; 
    } 

} 

HTML

<body> 
    <div class="header-background"> 
     <!-- <div> --> 
     <div id="nav"> 
     <div id="logo">Site Title</div> 
     <nav id="desktop-nav"> 
      <a class="nav-item" href="#1">Github</a> 
      <a class="nav-item" href="#2">About</a> 
      <a class="nav-item" href="#3">Community</a> 
      <a class="nav-item" href="#4">Docs</a> 
     </nav> 
     <input id="open-toggle" class="nav-toggle" type="text" readonly> 
     <input id="close-toggle" class="nav-toggle" type="text" readonly> 
     <nav id="mobile-nav"> 
      <a class="nav-item" href="#4">Docs</a> 
      <a class="nav-item" href="#3">Community</a> 
      <a class="nav-item" href="#2">About</a> 
      <a class="nav-item" href="#1">Github</a> 
     </nav> 
    </div> 
     <!-- </div> --> 

     <!-- <div class="header-notes"> 
      <div><span class="green">/creative</span> one page template</div> 
     </div> --> 

    </div> 

和JS的字段是： -

(function(adiachenko) { 

    window.addEventListener("load", function() { 

     var stuffList = document.querySelectorAll("#stuff-list li"); 

     if (stuffList.length % 4 === 1) { 
      var view = window.innerWidth; 

      if (view > 600) { 
       [].forEach.call(stuffList, function(stuffMember) { 
        // do whatever 
        stuffMember.style.width = "18%"; 
       }); 
      } 

      window.onresize = function() { 
       view = window.innerWidth; 
       changePictureSize(view, stuffList); 
      }; 
     } 

     function changePictureSize(view, stuffList) { 
      if (view > 600) { 
       [].forEach.call(stuffList, function(stuffMember) { 
        // do whatever 
        stuffMember.style.width = "18%"; 
       }); 
      } else { 
       [].forEach.call(stuffList, function(stuffMember) { 
        // do whatever 
        stuffMember.style.width = null; 
       }); 
      } 
     } 

    }, false); 

}(window.adiachenko = window.adiachenko || {})); 

現在我得到的頁面是一樣： -

但我想要的導航像： -

這種導航需要的大小作爲頁面的主體..

navigation.css

#nav { 
    position:relative; 
    width:620px; 
    margin:0 auto; 
} 

ul#navigation { 
    margin:0px auto; 
    position:relative; 
    float:left; 
    border-left:1px solid #c4dbe7; 
    border-right:1px solid #c4dbe7; 
} 

ul#navigation li { 
    display:inline; 
    font-size:12px; 
    font-weight:bold; 
    margin:0; 
    padding:0; 
    float:left; 
    position:relative; 
    border-top:1px solid #c4dbe7; 
    border-bottom:2px solid #c4dbe7; 
} 

ul#navigation li a { 
    padding:10px 25px; 
    color:#616161; 
    text-shadow:1px 1px 0px #fff; 
    text-decoration:none; 
    display:inline-block; 
    border-right:1px solid #fff; 
    border-left:1px solid #C2C2C2; 
    border-top:1px solid #fff; 
    background: #f5f5f5; 

    -webkit-transition:color 0.2s linear, background 0.2s linear; 
    -moz-transition:color 0.2s linear, background 0.2s linear; 
    -o-transition:color 0.2s linear, background 0.2s linear;  
    transition:color 0.2s linear, background 0.2s linear; 
} 

ul#navigation li a:hover { 
    background:#f8f8f8; 
    color:#282828; 
} 

ul#navigation li:hover > a { 
    background:#fff; 
} 

/* Drop-Down Navigation */ 
ul#navigation li:hover > ul 
{ 
    visibility:visible; 
    opacity:1; 
} 

ul#navigation ul, ul#navigation ul li ul { 
    list-style: none; 
    margin: 0; 
    padding: 0;  
    visibility:hidden; 
    position: absolute; 
    z-index: 99999; 
    width:180px; 
    background:#f8f8f8; 
    box-shadow:1px 1px 3px #ccc; 
    opacity:0; 
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;  
} 

ul#navigation ul { 
    top: 43px; 
    left: 1px; 
} 

ul#navigation ul li ul { 
    top: 0; 
    left: 181px; 
} 

ul#navigation ul li { 
    clear:both; 
    width:100%; 
    border:0 none; 
    border-bottom:1px solid #c9c9c9; 
} 

ul#navigation ul li a { 
    background:none; 
    padding:7px 15px; 
    color:#616161; 
    text-shadow:1px 1px 0px #fff; 
    text-decoration:none; 
    display:inline-block; 
    border:0 none; 
    float:left; 
    clear:both; 
    width:150px; 
} 

ul#navigation li a.first { 
    border-left: 0 none; 
} 

ul#navigation li a.last { 
    border-right: 0 none; 
} 

但我失敗了..我必須添加此字段才能達到此屏幕？以中心對齊的任何元素拇指

Answer 1

退房與下面的鏈接。

http://jsfiddle.net/bdd9U/564/

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
} 

Answer 2

基本規則是指定，像這樣

.my-class { 
    width: 600px; 
    margin: auto; 
} 

Answer 3

寬緣汽車我希望這可能與您的問題有所幫助。

https://jsfiddle.net/4txndpfm/

$('.handle').on('click', function(){ 
     $('nav ul').toggleClass('showing'); 
    });