How to align nav-item to center of page-CodePudding

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

nav {
    position: absolute;
    margin: auto;

    .nav-container {
        padding-right: 2rem;
        padding-left: 2rem;
        padding-bottom: 2rem;
        margin-top: 2rem;
        margin-right: auto;
        margin-left: auto;

        .nav-list {
            list-style-type: none;

            .nav-item {
                display: inline-block;
                padding-left: 2rem;
                padding-right: 2rem;
                font-size: 1.2rem;

                .nav-link {
                    text-decoration: none;
                    color: #fbfdff;
                }
            }
        }
    }
}

header {
    background-color: #313131;
    height: 50rem;
}

<nav>
  <div >
      <ul >
          <li ><a href="#" >HOME</a></li>
          <li ><a href="#" >ABOUT ME</a></li>
          <li ><a href="#" >PROJECTS</a></li>
          <li ><a href="#" >CONTACT</a></li>
      </ul>
  </div>
</nav>

How can i align nav-item to center of the nav-container ? Navbar should has transparent background, so i wanted to add position: absolute; style to nav element. Also all nav-item s should appear side by side. That's why i added display: inline-block; style to them.

CodePudding user response：

Set the width of the nav to full width, and then use text-align: center.

nav {
    width: 100%;
    text-align: center;
}

CodePudding user response：

there are so many ways to that but I'll prefer to use flexbox or css grid in 'nav-list'. here's the example using felxbox:

.nav-list {
          display:flex;
          justify-content:center;
          align-items: center; (if want to align vertically as well)
          list-style-type: none;
}

it will resolve your problem, copy paste and enjoy.

CodePudding user response：

just add this in css and it will be in center


.nav-list{
  display: grid;
  justify-content: center;
}

CodePudding user response：

your styles are not correct css syntax.

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}


    .nav-container {
        padding-right: 2rem;
        padding-left: 2rem;
        padding-bottom: 2rem;
        margin-top: 2rem;
        margin-right: auto;
        margin-left: auto;
}
        .nav-list {
            list-style-type: none;
}
            .nav-item {
                display: inline-block;
                padding-left: 2rem;
                padding-right: 2rem;
                font-size: 1.2rem;
}
                .nav-link {
                    text-decoration: none;

                }
            
header {
    background-color: #313131;
    height: 50rem;
}

<nav>
  <div >
      <ul >
          <li ><a href="#" >HOME</a></li>
          <li ><a href="#" >ABOUT ME</a></li>
          <li ><a href="#" >PROJECTS</a></li>
          <li ><a href="#" >CONTACT</a></li>
      </ul>
  </div>
</nav>