title: Centering a span12 div in a container in Bootstrap
body: <p>I have been through a number of similar questions, and tried to adapt the solutions to my case, but haven't had success in doing so.</p>
  
  <p>I am trying to implement something of a reader, so I have a reading pane which I want to center on my page. I want to limit the size of the pane so that the user is no reading lines spanning the full width of a large browser window, but I also want to have that pane centered in the window. Above the pane I have a header which spans the full width of the page.</p>
  
  <p>Originally I tried to use "span8 offset2" for the reading pane, but as the size of the window is reduced, I want the margins to disappear before the pane shrinks, and using this setup, the reading pane shrinks unnecessarily, squeezing content, as the window is made thinner.</p>
  
  <p>I get the correct behavior just using "span12" with "max-width: 700px" set, in terms of the reading pane shrinking as I want it to, but I cannot get the div to center on the page.</p>
  
  <p>Here is what I have that I'm working with:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row-fluid"&gt;
        &lt;div class="span12 reading-pane"&gt;
          &lt;div class="row-fluid"&gt;
            &lt;div class="nav"&gt;
              &lt;div class="span6 offset3"&gt;
                Main Navigation
              &lt;/div&gt;
              &lt;div class="span2 offset1"&gt;
                Nav2
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row-fluid"&gt;
            &lt;div class="span12"&gt;
              &lt;div class="body-text"&gt;
                Text Area
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The style for the reading-pane is as follows:</p>
  
  <pre><code>.reading-pane {
    border: solid;
    border-color: #ccc;
    border-width: 3px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    min-height: 40px;
    line-height: 40px;
    max-width: 700px;
  }
  </code></pre>
  
  <p>I have tried adding the following to the .reading-pane style (individually):</p>
  
  <pre><code>float: none;
  margin-left: auto;
  margin-right: auto;
  </code></pre>
  
  <p> </p>
  
  <pre><code>margin: 0 auto;
  </code></pre>
  
  <p> </p>
  
  <pre><code>float: none;
  margin: 0 auto;
  </code></pre>
  
  <p>I've also tried centering text in the container which centers my header text, but not the reading-pane.</p>
  
  <p>So how do I get the span12 div to center on the page?</p>