Centrer la barre de navigation

Question

Bonjour, j'essaye de mettre en place une barre de navigation au milieu en haut de la page. J'ai essayé d'aligner le texte, en alignant les éléments au centre, mais je n'ai pas eu de chance jusqu'à présent, Est-ce que quelqu'un sait comment aligner ce menu de navigation au milieu de la page ?

/* Clearfix */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}


/* Basic Styles */

body {
  background-color: #ece8e5;
}

nav {
  height: 40px;
  width: 20%;
  background: #da6548;
  font-size: 11pt;
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: bold;
  position: relative;
  text-align: center;
  border-bottom: 2px solid #da6548;
}

nav ul {
  padding: 0;
  margin: 0 auto;
  width: 5 px;
  height: 40px;
  align-items: center;
}

nav li {
  /* display: inline; */
  margin: 0 auto;
  align-items: center;
  display: inline-block
}

nav a {
  color: #fff;
  display: inline-block;
  width: 100px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  text-shadow: 1px 1px 0px #283744;
}

nav li a {
  border-right: 1px solid #576979;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav li:last-child a {
  border-right: 0;
}

nav a:hover,
nav a:active {
  background-color: #8c99a4;
}

nav a#pull {
  display: none;
}


/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  }
}


/*Styles for screen 515px and lower*/

@media only screen and (max-width: 480px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content: "";
    background: url('http://media02.hongkiat.com/responsive-web-nav/demo/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}


/*Smartphone*/

@media only screen and (max-width: 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid #576979;
  }
}


/* nav bar until here */

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="./">Home</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

Answer 1

Je vous suggère de laisser tomber "float" et d'utiliser flex, c'est simple, puissant et facile à prendre en main.

CSS

nav {
    display: flex;
    align-items: center;
    height: 75px;
    background: #3c7eca;
    gap: 5px;
    padding: 5px;
}
nav a {
    color: white;
    padding: 10px 40px;
    background: #d86649;
    text-decoration: none;
}

HTML

    Home
    Blog

Answer 2

Ajoutez margin: auto; à vos éléments de navigation :

/* Clearfix */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}


/* Basic Styles */

body {
  background-color: #ece8e5;
}

nav {
  margin: auto;
  height: 40px;
  width: 20%;
  background: #da6548;
  font-size: 11pt;
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: bold;
  position: relative;
  text-align: center;
  border-bottom: 2px solid #da6548;
}

nav ul {
  padding: 0;
  margin: 0 auto;
  width: 5 px;
  height: 40px;
  align-items: center;
}

nav li {
  /* display: inline; */
  margin: 0 auto;
  align-items: center;
  display: inline-block
}

nav a {
  color: #fff;
  display: inline-block;
  width: 100px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  text-shadow: 1px 1px 0px #283744;
}

nav li a {
  border-right: 1px solid #576979;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav li:last-child a {
  border-right: 0;
}

nav a:hover,
nav a:active {
  background-color: #8c99a4;
}

nav a#pull {
  display: none;
}


/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  }
}


/*Styles for screen 515px and lower*/

@media only screen and (max-width: 480px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content: "";
    background: url('http://media02.hongkiat.com/responsive-web-nav/demo/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}


/*Smartphone*/

@media only screen and (max-width: 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid #576979;
  }
}


/* nav bar until here */

  

    
Home
    
Blog