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>