將Anchor標記移動到導航欄的中心

Question

我正在嘗試將導航中的Anchor標記移動到酒吧的中心，如何才能使錨點保持固定並且不會在不同屏幕中更改位置？我的代碼如下：

HTML代碼

<nav class = "nav-main" id = "navMain"> 

      <ul> 
       <li> 
        <a href = "#" class = "nav-item"> HOME</a>        
       </li> 
       <li> 
        <a href = "#" class = "nav-item">ABOUT US </a> 
       </li> 

       <li> 
        <a href = "#" class = "nav-item">PORTFOLIO </a> 
       </li> 

       <li> 
        <a href = "#" class = "nav-item">SERVICES </a> 
       </li> 
        <li> 
        <a href = "#" class = "nav-item">CONTACT US </a> 
       </li> 

      </ul> 
    </nav> 

CSS

.nav-main { 
    width:100%; 
    background-color: #222; 
    height:70px; 
    color:#fff; 
} 




.nav-main .logo{ 
    float:left; 
    height:40px; 
    padding:15px 30px; 
    font-size: 1.4em; 
    line-height: 40px; 
} 


.nav-main > ul { 

    margin:0; 
    float:left; 
    list-style-type: none; 
} 

.nav-main > ul > li { 

    float:left; 
    padding-left: 10px; 

} 

.nav-main > ul > li > a { 

    text-decoration: none; 
    text-align: center; 
    padding-left:100px; 
} 


    .nav-item { 
    display:inline-block; 
    padding:15px 20px; 
    height:40px; 
    line-height:40px; 
    color:#fff; 
    text-decoration:none; 
} 

.nav-item:hover { 

    background-color:forestgreen; 

} 

JS FIDDLE

https://jsfiddle.net/x45wqktz/

我用文本對齊：中心但沒有結果。正好在酒吧的左邊。

Answer 1

添加到NAV-主類，這個屬性：

.nav-main { 
    width:100%; 
    background-color: #222; 
    height:70px; 
    color:#fff; 
     display: flex; 
    justify-content: center; 
} 

Answer 2

該文本似乎已居中。文本不居中的唯一方法是如果您將窗口大小設置得非常小，那麼您必須創建導航欄才能響應。我想閱讀更多關於@media標籤：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp