Align nav bar in the center [duplicate] - css

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 months ago.
Hi I am trying to have a nav bar in the middle on the top of the page. I have tried text alignment, align items as center, but I had no luck so far,
Does anyone know how to align this nav menu in the middle of the 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>Home</li>
<li>Blog</li>
</ul>
</nav>

Answer 1

Add margin: auto; to your nav 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 */
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Blog</li>
</ul>
</nav>

Answer 2

I suggest you to get rid of "float" and use flex instead, it's much simple and powerful and easy to deal with.
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
<nav>
Home
Blog
</nav>