How do I center list items horizontally? - html

Question

I have an excerpt of code that I need centered in my header, (just the text and the actual padding). I'm new to coding so if this doesn't sound right don't be surprised. This is the code where I need my list items centered in. Try to make your answer as beginner-like as possible.
CSS:
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
HTML:
<div id= "navcontainer">
<!-- BEGIN TABS -->
<ul>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
I know the li elements are messy but I do it so I can see it better. Sorry.

Answer 1

Add a text-align: center to the <ul>:
#navcontainer ul {
text-align: center;
}
Snippet
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
<div id="navcontainer">
<!-- BEGIN TABS -->
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
<ul>
<li>
Jackpot
</li>
<li>
Profile
</li>
<li>
Market
</li>
<li>
Support
</li>
</ul>
</div>
Also, not a good idea to have anything other than <li> inside the <ul>. You have also omitted a </a>.

Answer 2

There were a few errors in your markup, I've gone ahead and fixed them for you. All that's required to center your list items is text-align: center if you're positioning them as inline elements.
<div id= "navcontainer">
<ul>
<li>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
</li>
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
</div>
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
http://jsfiddle.net/ruLns221/
Just to further explain the changes, you should only add li elements to an unordered list (ul) so I've nested your logo within a list item. I've closed some unclosed tags off as well.