Zentrierte Navigationsleiste

Question

Hallo, ich versuche, oben in der Mitte der Seite eine Navigationsleiste einzurichten. Ich habe versucht, den Text auszurichten und die Elemente in der Mitte auszurichten, hatte aber bisher kein Glück. Weiß jemand, wie man dieses Navigationsmenü in der Mitte der Seite ausrichtet?

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

我建议你放弃“float”并使用flex，它简单、强大且易于处理。

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

将 margin: auto; 添加到您的导航元素：

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