Today, when the adjustment problems ul centered, in a spot of trouble, before using ul time, but let it not vertical arrangement, are arranged sideways to use float: left this property, but then, today I get some friendship link time, there have been centered in the div ul not in question, is joined in the div style = "text-align: center;" ul not centered, and finally carefully compared the internet, with the float found: the reason left of the first tile, ul of style can use display: inline, without having to use the float property, then you can use this style on the div = "text-align: center;" the center ul list shows.
Note: this setting method will not set the width LI, set display: inline-block; width before setting, while DIV provided text-align: cente; valid
1, assuming that the original code is:<div id="links" style="border:1px solid red;">
<ul>
<li><a href="#">link111111</a></li>
<li><a href="#">link2222</a></li>
<li><a href="#">link33333</a></li>
<li><a href="#">link44444</a></li>
<li><a href="#">link555555</a></li>
</ul>
</div>
The effect should be displayed like this
2, the black dot in the preceding list is removed (using the list-style-type style ul of: none;)
<div id="links" >
<ul style="border:1px solid red;list-style-type:none;">
<li><a href="#">link111111</a></li>
<li><a href="#">link2222</a></li>
<li><a href="#">link33333</a></li
<li><a href="#">link44444</a></li>
<li><a href="#">link555555</a></li>
</ul>
</div>
3, so that the display li and ul horizontal intermediate position of div, (li using style = "display: inline;"), as shown below
<style type="text/css">
#links {text-align:center;}
#links ul{border:1px solid red;list-style-type:none;}
#links ul li{
display:inline;
}
</style>
<div id="links" >
<ul>
<li><a href="#">link111111</a></li>
<li><a href="#">link2222</a></li>
<li><a href="#">link33333</a></li
<li><a href="#">link44444</a></li>
<li><a href="#">link555555</a></li>
</ul>
</div>
As shown below:
So far in the realization ul li horizontal display, and ul centered in the div.