How to center a menu on my online shop? - html

Question

I hope I am right here, I need your help with my upcoming online shop. I would like to center the main categorie menu on the top but I am missing the right CSS order.
This is what it looks right right now and there are 2 ways I want to test the looking.
First I want is a centered menu where "home" and "Kollektionen" have the same distance to the left or right.
And secondly I want to try out what it looks like when every li-element 'pushes' the next element to the right so that it's centered at the last one.
You know what I mean? 2 different ways of centering my menu and I don't find the right command....
I hope you can help me.
Thanks in advance.
PS: sorry for my bad english, it's not my native language.
EDIT: I cannot post code I'm afraid as it's not mine. But maybe this is enough: the basic template is made of this http://www.shopwaredemo.de/
2nd EDIT: after trying Asko's, Mike's and Tom's answer and both works I ask myself why? What is the difference between display:flex and display:inline-box and between text-align and justify-content set to center???

Answer 1

Perhaps use display: inline-block? E.g the following:
.menu {
text-align: center;
}
.menu li {
float: none; /* assuming the template has set this to 'left' */
display: inline-block;
margin-left: 20px; /* tweak this for the space inbetween items */
margin-right: 20px; /* and this, too */
}
Note that I didn't look at the code, so the div .menu is an example.

Answer 2

You can try to make the <ul> display: inline-block and apply text-align: center on parent.
JSFiddle Demo: http://jsfiddle.net/Q2hSv/1/

Answer 3

Without seeing some code, maybe this will help.
.topmenu {
width: 80%;
margin: auto;
}
.menuitems {
float: left;
width: // Here you take the number of items divided by 100%
// remember to take borders and margins into account

Answer 4

Dependent on your browser scope you could use display:flex;
HTML:
<nav>
<ul>
<li>Home</li>
<li>Neuheiten</li>
<li>Orschmuck</li>
<li>Ringe</li>
<li>Halsketten</li>
<li>Armbander</li>
<li>Kollecktion</li>
</ul>
</nav>
CSS:
nav {
background: #000;
margin: 0 auto;
width: 70%;
}
ul {
display: flex;
justify-content: center;
}
li {
list-style: none;
}
Example http://codepen.io/tom-maton/pen/AFpnJ

Answer 5

back to work and managed to achieve my goal:
Thanks again for every answer, I used and played a lot with your snippets and and I ended up using this (click click!):
#mainNavigation {
margin: 0 auto;
width: 98%;
}
#mainNavigation ul {
display: flex;
justify-content: center;
}
#mainNavigation li {
list-style: none;
width: 15%;
text-align: center; /* to center the li-elements itself */
}
which works perfectly! Still figuring out what excatly justify-center and display:flex do but I want you to know that you helped a lot.
CHEERS!
PS: how come my thread got a negative rating? it says -1 to me!? Did I do anything wrong?