Center aligning the top menu categories via CSS - css

Question

I needed to center align my menu categories, such that the menu categoreis should sit for a width of 1200px and there should be even gaps (i.e. margin-right) between the category items in the menu and last item should sit to the right more corner in the screen (i.e. margin-right:0). Please find below the sample code for the same.
https://jsfiddle.net/es0o324t/1/
HTML:
<div class="navigationbarcollectioncomponent">
<div id="nav_main">
<ul>
<li class="La parent">
Clothing
</li>
<li class="La parent">
Denim
</li>
<li class="La parent">
Accessories
<li class="La parent">
Online Exclusives
</li>
<li class="La parent">
Sale
</li>
<li class="La parent">
Hot offers
</li>
</ul>
</div>
</div>
CSS:
body {
margin:0;
padding:0;
}
ul{
margin-left:0;
}
ul,li{
list-style: none;
padding:0;
}
.navigationbarcollectioncomponent {
width: 1200px;
margin: 0 auto;
}
#nav_main li.La{
float: left;
}
#nav_main li.La > a {
color: #373737;
display: inline-block;
font-family: "Lato-Regular";
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0px 8px;
text-transform: uppercase;
}
I had achieved this via JavaScript and by reading the width of each of the categories in the menu and then calculating the gap b/w the categories based on the category count.
But the issue is i need to do this only via CSS not using JavaScript. bcoz the calculation via JS is taking some time.
Also the count of number of categories is dynamic. Hence i cannot hardcode the margin-right value for each of the categories (i.e. li tag).
Please let me know if there is a solution for the same.
PFA for the snapshot on expected result.
First category should be left most aligned in 1200px width and last category should be aligned to the right and the categories that are b/w first and last categories should be center aligned with even spacing

Answer 1

As you tagged this question with CSS3, why not use flex?
Make your container ul set to display flex with justify-content set to space-between.
ul {
width: 100%; padding: 8px;
display: flex;
justify-content: space-between;
}
Your Fiddle: https://jsfiddle.net/abhitalks/es0o324t/2/

Answer 2

To center you nav menu, please add this css too.
#nav_main{
margin: 0 auto;
display: table;
}

Answer 3

check this fiddle : jsfiddle.net/shiyaspathiyassery/6jqy6702/1/
You have added float: left; Please remove that.

Answer 4

Here's something close enough. Run the code snippet to see the result:
although the leftmost and rightmost menu are not sticking to the sides, respectively, since the <li> text-align is set to center in order to achieve even space between the menus.
body {
margin:0;
padding:0;
}
ul{
display: -webkit-box;
display: -moz-box;
display: box;
width: 100%;
}
ul,li{
list-style: none;
padding:0;
}
.navigationbarcollectioncomponent {
display: inline-block;
width: 1200px;
margin: 0 auto;
}
#nav-main{
display: inline-block;
width: 100%;
}
#nav_main li.La{
text-align: center;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
#nav_main li.La > a {
color: #373737;
display: inline-block;
font-family: "Lato-Regular";
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0px 8px;
text-transform: uppercase;
}
<div class="navigationbarcollectioncomponent">
<div id="nav_main">
<ul>
<li class="La parent">
Clothing
</li>
<li class="La parent">
Denim
</li>
<li class="La parent">
Accessories
<li class="La parent">
Online Exclusives
</li>
<li class="La parent">
Sale
</li>
<li class="La parent">
Hot offers
</li>
</ul>
</div>
</div>

Answer 5

table-layout: fixed can be used to achieve what you are looking for.
In table-layout: fixed the horizontal layout only depends on the table's width and the width of the columns irrespective of the contents of the cells.
So your table width will be equally divided for each columns.
Add/modify these css properties for ul and #nav_main li.La
ul{
margin-left:0;
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
#nav_main li.La{
display:table-cell;
}
https://jsfiddle.net/f03mqxd7/