What is the best semantic way to keep horizontal list items center aligned?

What is the best semantic way to keep horizontal list items center aligned?

Is it possible to keep the items center aligned of this code

 <ul id="items">
  <li>item 1</li>
  <li>item2</li>
  <li>iem3</li>
</ul>

li {list-style:none; font-size:16px; float:left; font-size:14px}

I found this way on search http://css-tricks.com/examples/CenterHorizontalLi开发者_运维百科stItems/

is there any other better way? without needing extra div

Is there any trick to write something for this ul li { } to keep list item center aligned?

All you need is display:inline or display:inline-block applied to the <li>s and text-align:center applied to the <ul> to get the centering. You definitely don't need extra non-semantic markup.

http://jsfiddle.net/Madmartigan/rKqMq/2/

There are other ways that involve float but IMO this way is best. Note that those two display properties behave differently, so you'll have to tune to meet your needs.