CSS controls the center of the navigation bar

css| Navigation | control

In the process of learning, I want to be able to get the CSS navigation bar can also center the effect
However, the use of ordinary text-align:center;
Does not work, after searching on the web
A link to the classic forum, the UK's Cssplay website published two ways to get it centered
One of them uses a very strange del tag and doesn't know why
But it's still nice to solve a problem.

#menu1 {  width:408px;  padding:0;   margin:0 Auto;   List-style-type:none;  } #menu1 li {  float:left;  width:100px;  border:1px solid #fff;   } #menu1 a {  display:block;  width:100px;  Color: #000;   Background: #d4d4d4;   Text-align:center;   padding:4px 0;   Text-decoration:none;   Float:left;   } #menu1 a:hover {  color: #fff;   Background: #08c;  } #menu2 {  display:table;  padding:0;   margin:0 Auto;   List-style-type:none;  White-space:nowrap;  } #menu2 li {  display:table-cell;  } * HTML #menu2 li {  float:left;  } #menu2 a {  width:auto;  Display:block;  PADDING:4PX 16px;  Color: #fff;   Background: #08c;   border:1px solid #fff;   Text-decoration:none;  } * HTML #menu2 a {  float:left;  } #menu2 a:hover {  color: #000;   Background: #d4d4d4;  container {clear:both; text-decoration:none;} * HTML. Container {Display:inline-block}

Xhtml

<ul id= "menu1" ><li><a href= "#nogo" >tab one</a></li><li><a href= "#nogo" > tab two</a></li><li><a href= "#nogo" >tab three</a></li><li><a href= "# Nogo ">tab Four</a></li></ul><del class= container" ><ul id= "MENU2" ><li>< A href= "#nogo" >tab one</a></li><li><a href= "#nogo" >tab two:longer</a></li> <li><a href= "#nogo" >tab three:longest</a></li><li><a href= "#nogo" >Tab Four< /a></li></ul></del>