Move navigation to center [duplicate] - html

Question

This question already has an answer here:
Can't get my navigation menu in the center of the page
(1 answer)
Closed 8 years ago.
Working on a html/css page, and found a cool navigation bar which I downloaded and edited. But having the issue to put the navigation in the center of the header. Here is how it looks now:
https://www.dropbox.com/s/20viph17tc36iwb/header.png
index.html
<ul id="nav">
<li><img src="images/home.png" /> Forside</li>
<li><span><img src="images/temperatur.png" /> Måling</span></li>
<li><span><img src="images/sol.png" /> Dagvakt</span></li>
<li><img src="images/kveld.png" /> Kveldsvakt</li>
<li><img src="images/vaske.png" /> Kontroll CM</li>
<li><img src="images/søk.png" /> Søk</li>
<li><img src="images/top2.png" /> Statistikk</li>
<li><img src="images/top3.png" /> Rapport</li>
</ul>
menu.css
ul#nav {
display:block;
float:left;
font-family:Trebuchet MS,sans-serif;
font-size:0;
padding:5px 5px 5px 0;
background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#F2F2F2, f5f5f5); /* the standard - Farge */
}
ul#nav,ul#nav ul {
list-style:none;
margin:0;
}
ul#nav,ul#nav .subs {
background-color:#444;
border:0px solid #454545; /* Border */
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
ul#nav .subs {
background-color:#fff;
border:2px solid #222;
display:none;
float:left;
left:0;
padding:0 6px 6px;
position:absolute;
top:100%;
width:300px;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
ul#nav li:hover>* {
display:block;
}
ul#nav li:hover {
position:relative;
}
ul#nav ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#nav ul {
padding:0 5px 5px;
}
ul#nav .col {
float:left;
width:50%;
}
ul#nav li {
display:block;
float:left;
font-size:0;
white-space:nowrap;
}
ul#nav>li,ul#nav li {
margin:0 0 0 5px;
}
ul#nav ul>li {
margin:5px 0 0;
}
ul#nav a:active,ul#nav a:focus {
outline-style:none;
}
ul#nav a {
border-style:none;
border-width:0;
color:#181818;
cursor:pointer;
display:block;
font-size:13px;
font-weight:bold;
padding:8px 18px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 1px 1px;
vertical-align:middle;
}
ul#nav ul li {
float:none;
margin:6px 0 0;
}
ul#nav ul a {
background-color:#fff;
border-color:#efefef;
border-style:solid;
border-width:0 0 1px;
color:#000;
font-size:11px;
padding:4px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 0 0;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#nav li:hover>a {
border-style:none;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
text-shadow:#181818 0 1px 1px;
}
ul#nav img {
border:none;
margin-right:8px;
vertical-align:middle;
}
ul#nav span {
background-position:right center;
background-repeat:no-repeat;
display:block;
overflow:visible;
padding-right:0;
}
ul#nav ul li:hover>a {
border-color:#444;
border-style:solid;
color:#444;
font-size:11px;
text-decoration:none;
text-shadow:#fff 0 0 0;
}
ul#nav > li >a {
background-color:transpa;
height:25px;
line-height:25px;
border-radius:11px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
}
ul#nav > li:hover > a {
background-color: #009900;
line-height:25px;
}
design.css
#logo {
position: fixed;
left: 10px;
right: 0 px;
top: 0px;
}
.header {
height: 95px;
background:#F2F2F2;
border:2px solid #CCC;
width:1370px;
margin: 0px auto;
}

Answer 1

Use the property margin.
ul {
margin: 0 auto 0 auto;
}
auto means it will be centered is set on both sides.

Answer 2

There's a bit more than that.
You have to pre-define the width on your body for your element (nav in this case) to actually adopt a margin.
make sure you have these before you apply the margin
html {
width: 100%;
}
body {
width: 1200px; /* change this to whatever width you are working with */
margin: 0 auto;
}
If you don't do this, your margin:0 auto on your nav will center it to the left giving the appearance that it didn't work.
EDIT
You have to spend some time creating some basic htmls and learn the fundamentals of website architecture. I appreciate your passion, I was the same way when I started years ago when HTML was simpler, but trust me man, web development has gotten a lot of muscle over the last 10 years. Start from the bottom as move up as you start dominating the concepts.
Here is the JSFiddle for your working solution.
JSFiddle

Answer 3

Just add margin:0 auto; and a fixed width and you got it
ul#nav {
display:block;
float:left;
font-family:Trebuchet MS,sans-serif;
font-size:0;
padding:5px 5px 5px 0;
margin:0 auto;
width:100%;
background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#F2F2F2, f5f5f5); /* the standard - Farge */
}