Question

I’m having difficulty centering li elements in my document.

I’ve put a wrapper (<div align="center"> around the li elements but with little luck.

It seems to be only centering the header of each li element and not the entire block of li elements. I would like the whole block of Priority, Round 1 and Round 2 centred (i.e. in the middle of a div).

This is my code so far: http://jsfiddle.net/nTcBk/

HTML

<div>
<div align="center">
<ul class="round">
        <li class="current-round" style="cursor: default; ">
          <div>Priority</div>
          <span>Ending 01/11/2012</span></li>
        <li style="cursor: default; ">
          <div>Round 1</div>
          <span>Starting 01/12/2012</span></li>
        <li style="cursor: default; ">
          <div>Round 2</div>
          <span>Starting 01/01/2013</span></li>
</ul>
</div>
</div>

​CSS

.round {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.round li {
    color: #DDD;
    cursor: pointer;
    float: left;
    font-size: 18px;
    padding-right: 20px;
}
.round li span {
    font-size: 12px;
    display: block;
}
.round .current-round {
    color: #2a145d;
    cursor: auto;
}
​

Thanks in advance

Answer 1

Enjoy- http://jsfiddle.net/nTcBk/1/
instead of:

.round {
    width:100%;
}

use:

.round {
    display:inline-block;
}