css控制导航栏的居中

在学习的过程中，我希望能够得到css的导航栏也能够居中的效果
但是，使用普通的text-align:center;
不起作用，经过在网上搜索
在经典论坛得到链接，uk的cssplay网站上公布了两种使其居中的方法
其中有一个使用了非常奇怪的del标签，不知道是为什么
但是总算解决掉了一个问题仍然很高兴

#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>