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

这是您的问题的简化版本。您需要计算 window 的宽度和导航的宽度。将该差值除以 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>

.

Answer 2

您不需要 Javascript。只需使用媒体查询。

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

CSS：导航对齐

CSS: Navigation Alignment

html

css

justify

nav