title: How to center an unordered list inside a fixed position div with 100% width
body: <p>I am working on a web layout where I have a navigation bar at the top set as position:fixed; width: 100%; so that even when the user scrolls it stays at the top of the viewport and occupies the width of the page. I want to put a centered horizontal unordered list of links (width 940px) inside it like so:</p>
  
  <pre><code>&lt;nav id='nav-bar'&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href='#'&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;text&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Having tried various combinations of display and position/float etc I have been unable to centre it without the list wrapping over two lines if I try to resize the page. I expect there may be some other wrapper required to contain the list.</p>