Center the css control navigation bar

In the course of learning, I hope that the css navigation bar can also be centered.
However, the common text-align: center;
Does not work. After searching on the Internet
Link to the classic Forum. Two methods to center cssplay are published on the uk website.
One of them uses a very strange del tag. I don't know why.
However, I am still very happy to solve this problem.

The code is as follows:

Copy code

# Menu1 { Width: 408px; Padding: 0; Margin: 0 auto; List-style-type: none; } # Menu1 li { Float: left; Width: 100px; Border: 1px solid # fff; } # Menu1 { 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 { Width: auto; Display: block; Padding: 4px 16px; Color: # fff; Background: # 08c; Border: 1px solid # fff; Text-decoration: none; } * Html # menu2 { 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>