Center align navigation bar

Question

Hi, I'm trying to set up a navigation bar in the middle at the top of the page. I've tried text alignment, aligning the items to the center but I've had no luck so far, does anyone know how to align this navigation menu in the middle of the page? /*Clearfix*/.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;

P粉022285768 · Answer

I suggest you drop "float" and use flex, it's simple, powerful and easy to handle.

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

P粉883278265 · Answer

Add margin: auto; to your navigation element:

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