How to center align <ul><li> which serves as menu? [duplicate] - css

Question

This question already has answers here:
CSS center ul list
(2 answers)
Closed 7 years ago.
I tried to wrap it in div, I tried bunch of different code, but I cannot make it.
I will appreciate any help.
I don't know where am I making mistake.
.menu2 {
list-style: none;
justify-content: center;
align-items: center;
}
.menu2 li {
float: left;
width: 80px;
padding: 1px;
}
.menu2 > li a {
display: block;
font-size: 0.8em;
padding: 3px;
text-decoration: none;
text-align: center;
color: #333333;
border: 1px solid #d6d6d6;
transition: all ease .5s;
}
.menu2:hover > li a {
opacity: .5;
transition: all ease .5s;
}
.menu2 > li:hover a {
opacity: 1;
color: #D2383C;
border-color: #D2383C;
}
<ul class="menu2">
<li>2014</li>
<li>2013</li>
<li>2012</li>
</ul>

Answer 1

float: left will left-align your list items. You can achieve a similar effect to floating by using display: inline-block instead. Then put text-align: center on your .menu2 rather than align-items.
.menu2 {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu2 li {
display: inline-block;
width: 80px;
padding: 1px;
}
.menu2 > li a {
display: block;
font-size: 0.8em;
padding: 3px;
text-decoration: none;
text-align: center;
color: #333333;
border: 1px solid #d6d6d6;
transition: all ease .5s;
}
.menu2:hover > li a {
opacity: .5;
transition: all ease .5s;
}
.menu2 > li:hover a {
opacity: 1;
color: #D2383C;
border-color: #D2383C;
}
<ul class="menu2">
<li>2014</li>
<li>2013</li>
<li>2012</li>
</ul>
Note that a caveat of display: inline-block is that whitespace between the items will produce visual space between the menu items (notice the wider gap between the items in my code snippet versus the OP's). There are several possible solutions to this:
(1) Placing all lis on the same line with no whitespace between </li><li> (but this doesn't look too good in the source
<ul class="menu2">
<li>2014</li><li>2013</li><li>2012</li>
</ul>
(2) Achieving the equivalent effect by putting the whitespace in a comment (which also looks weird), e.g.
<ul class="menu2">
<li>2014</li><!--
--><li>2013</li><!--
--><li>2012</li>
</ul>
(3) Specifying font-size: 0; on .menu2 and overriding the font-size on the .menu2 li.

Answer 2

You only have to style the <ul> tag with margin: auto and display: table. Note that display: table may not work well in old IE browsers (See MDN documentation).
.menu2 {
list-style: none;
margin: auto;
display: table;
padding-left: 0; /* reset the left padding of <ul> */
}
.menu2 li {
float: left;
width: 80px;
padding: 1px;
}
.menu2 > li a {
display: block;
font-size: 0.8em;
padding: 3px;
text-decoration: none;
text-align: center;
color: #333333;
border: 1px solid #d6d6d6;
transition: all ease .5s;
}
.menu2:hover > li a {
opacity: .5;
transition: all ease .5s;
}
.menu2 > li:hover a {
opacity: 1;
color: #D2383C;
border-color: #D2383C;
}
<ul class="menu2">
<li>2014</li>
<li>2013</li>
<li>2012</li>
</ul>
For modern websites, you can take the advantage of <nav> HTML tags to make menus. Example is available here.