0

I want to have a navigation bar at the top of my webpage to be centred. I have been searching for hours and just cannot get this to work.

here is my HTML that I want to have centred.

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

and here is some CSS I found online that doesnt quite work entirely.

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

I am a fairly clueless developer as it is but am I missing something obvious?

Ryan
  • 1
  • 2

2 Answers2

0

Here it works.just changing margin-left attribute according to your requirment

#nav {
width: 100%;
float: left;
margin-left:300px;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }
<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>
Wasiq Muhammad
  • 3,080
  • 3
  • 16
  • 29
0

You can set text-align center to the parent and display: inline-block in the children to center. Example: 

#nav {
background: #fff;
width: 100%;
text-align: center;
width: 100%;
padding: 0;  
}

#nav ul {
list-style: none;
margin: 0 auto;
padding: 0; }

#nav li {
display: inline-block;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }
<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>
andreasolsson
  • 47
  • 8