How to center 4 elements 2 in lines?

Question

I have html like this:

<nav>
  <ul>
    <li><a href="#">lorem</a></li>
    <li><a href="#">ipsum</a></li>
    <li><a href="#">dolor</a></li>
    <li><a href="#">sit</a></li>
  </li>
</nav>

is it possible to center ul that to look like this:

|          lorem ipsum          |
|           dolor sit           |

I'm working on responsive site and on small screen I need the text to be in two lines and center.

Answer 1

Personally I think using floating elements creates more problems for beginner developers than solutions. I would go for the following solution:

http://jsfiddle.net/W7aLA/

HTML:

<nav>
  <ul>
    <li><a href="#">lorem</a></li>
    <li><a href="#">ipsum</a></li>
    <li><a href="#">dolor</a></li>
    <li><a href="#">sit</a></li>
  </ul>
</nav>

CSS:

nav {
    width: 400px;
    text-align: center;
}

li {
    list-style: none;
    display: inline;
}

li:nth-of-type(even):after {
    content: "";
    display: block;
}