html - 将 anchor 标记移动到导航栏的中心

Question

我正在尝试将导航中的 anchor 标签移动到栏的中心，我怎样才能使 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/

我使用了 text-align : center 但没有结果。就在栏的左侧。

Answer 1

将此属性添加到 nav-main 类:

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