CSS：導航對齊

Question

擁有當前導航。 width: 100%; max-width: 1000px。當屏幕大於max-width:1000px時，我正嘗試讓導航中心。任何幫助？

CSS：

nav{ 
display: -webkit-flex; 
display: flex; 

-webkit-align-self: center; 
align-self: center; 

-webkit-justify-content: center; 
justify-content: center; 

width: 100%; 
max-width: 1000px; 
min-height: 60px; 

z-index: 999; 
position: fixed; 
background: #000; 

box-shadow: 0 1px 5px rgba(0,0,0,.6); 
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6); 
} 
nav>div{ 
text-align: center; 

-webkit-flex: 1; 
flex: 1; 

-webkit-align-self: center; 
align-self: center; 
} 
#logo{ 
display: -webkit-flex; 
display: flex; 
cursor: default; 
-webkit-align-self: center; 
align-self: center; 

margin-left: 1em; 

color: #fff; 
font-weight: bold; 
font-size: 1.15em; 
line-height: 1.43; 
-webkit-font-smoothing: antialiased; 
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; 

width: 50px; 
height: 50px; 
} 
#headtag{ 
display: -webkit-flex; 
display: flex; 
cursor: default; 
-webkit-align-self: center; 
align-self: center; 

margin-left: 1em; 

color: #fff; 
font-weight: bold; 
font-size: 1.15em; 
line-height: 1.43; 
-webkit-font-smoothing: antialiased; 
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; 

width: 150px; 
height: 40px; 
} 
#tagline{ 
display: -webkit-flex; 
display: flex; 
cursor: default; 
-webkit-align-self: center; 
align-self: center; 

color: #fff; 
font-weight: bold; 
font-size: 1.15em; 
line-height: 1.43; 
-webkit-font-smoothing: antialiased; 
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; 

width: 250px; 
height: 50px; 
} 
nav>div{ 
width: 50vw;  
display: -webkit-flex; 
display: flex; 
} 
nav>div:nth-of-type(1){ 
-webkit-justify-content: flex-start; 
justify-content: flex-start; 
} 
nav>div:nth-of-type(2){ 
-webkit-justify-content: center; 
justify-content: center; 
} 
nav>div:nth-of-type(3){ 
-webkit-justify-content: flex-end; 
justify-content: flex-end; 
} 
nav>div>a{ 
display: -webkit-flex; 
display: flex; 

-webkit-align-self: center; 
align-self: center; 

text-decoration: none; 
cursor: pointer; 
color: #fff; 
font-size: 1em; 
font-weight: 300; 
-webkit-font-smoothing: antialiased; 
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial; 

margin: 0 .1em ; 
padding: 0.6em .5em; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
-moz-transition: background-color 100ms; 
-webkit-transition: background-color 100ms; 
transition: background-color 100ms; 
} 
nav>div>a:hover{ 
background: rgba(255,255,255,0.15); 
} 
nav>div>a:active{ 
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
} 
nav>div:nth-of-type(3)>a:nth-of-type(2){ 
background: rgba(255, 255, 255, 0.15); 
} 
nav>div>a:nth-of-type(2):hover{ 
background: rgba(255, 255, 255, 0.37); 
} 
#srchbar{ 
height: 30px; 
width: 150px; 
border: none; 
color: #7C7C7C; 
border-radius: 5px; 
outline: none; 
font-size: 1em; 
-webkit-font-smoothing: antialiased; 
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial; 
text-align: center; 
border: 1px solid #d5dadc; 
margin: .5em .1em ; 
padding: 0.6em .5em; 
} 

NAV：

<nav> 
<div> 
    <a href="/"> 
     <div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/> </div> 
     <div id="headtag"><img src="/Images/title.png" alt="Home"/></div> 
     <div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div> 
    </a> 
</div> 
<div> 
    <a href="/" class="here">Home</a> 
    <a href="/about.php">About</a>  
    <a href="/services.php">Services</a> 
    <a href="/pricing.php">Pricing</a> 
    <a href="/contact.php">Contact Us</a> 
    <input id="srchbar" type="search" placeholder="Search"> 
</div> 

形象並不重要，所以他的的jsfiddle

https://jsfiddle.net/zh3btgvn/1/

Answer 1

您不需要此Javascript的Javascript。只需使用媒體查詢。

@media (min-width: 1000px) { 
    nav { 
    left: 50%; 
    margin-left: -500px; //half the width 
    } 
} 

Answer 2

下面是您問題的簡化版本。您需要計算窗口的寬度和導航的寬度。將差異除以2，導航將放置在屏幕中間。

$().ready(function() { 
 
    var nav = $('nav'); 
 
    var position = ($(window).width() - nav.innerWidth())/2; 
 
    nav.css('left', position + 'px'); 
 
});

nav{ 
 
    background:#333; 
 
    width:400px; 
 
    height:60px; 
 
    position:fixed; 
 
    top:0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav></nav>

。