Home/ Questions/Q 4550480
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T16:30:07+00:00

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

  • 0

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/CenterHorizontalListItems/

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0