title: Aligning text center and then left
body: <p>Good Day</p>
  
  <p>I want to align text in the center of a div. Now that is easy with text-align: center on parent div.</p>
  
  <p>But If I want to left align the text inside the div to the left of the centered div, how do I do that?</p>
  
  <p>See my fiddle: <a href="http://jsfiddle.net/DvXzB/5/" rel="nofollow">http://jsfiddle.net/DvXzB/5/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="aboutContent" class="row-fluid"&gt;
      &lt;div id="aboutHeaderText" class="span12"&gt;&lt;span title=""&gt;About Us&lt;/span&gt;&lt;/div&gt;
      &lt;div id="aboutHeaderBody" class="span12"&gt;
          &lt;p&gt;&lt;a title=""&gt;asdasd&lt;/a&gt; is a free mobile application available for &lt;a href="#"
              title=""&gt;iOS&lt;/a&gt;, &lt;a href="#" title=""&gt;Android&lt;/a&gt;and the &lt;a href="#" title=""&gt;Blackberry&lt;/a&gt; operating
              systems.&lt;/p&gt;
          &lt;p&gt;sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
              l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg&lt;/p&gt;
          &lt;div id="cities"&gt;&lt;a title=""&gt;asdasdasd&lt;/a&gt; currently only displays events and
              specials in &lt;strong&gt;asdasd&lt;/strong&gt; (our hometown), but the following locations
              will be available before you know it:
              &lt;ul&gt;
                  &lt;li&gt;&lt;span&gt;asdg&lt;/span&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;asdwn&lt;/span&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Pasdasdroom&lt;/span&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Dasdaf&lt;/span&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Bergrin&lt;/span&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Sersch&lt;/span&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Graergwn&lt;/span&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;p&gt;Visit our &lt;a href="" title="" target="_blank"&gt;Facebook page&lt;/a&gt; for more
              up to date information, and feel free to &lt;a href="" title=""&gt;contact us&lt;/a&gt; with
              any queries.&lt;/p&gt;
          &lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#aboutContent {
      color: #222;
      margin-top: 50px;
      margin: 0 auto;
      text-align: center;
  }
  #aboutHeaderText span {
      font-family:"Kozuka Gothic Pr6N", sans-serif !important;
      color: #eeeeee;
      font-size: 26px;
      font-weight: bold;
  }
  #aboutHeaderText img {
      margin-top: -18px;
      margin-left: 8px;
  }
  #aboutHeaderBody {
      position: relative;
      padding: 0px;
      font-size: 16px;
  }
  #cities ul {
      list-style: none;
      margin-top: 10px;
  }
  #cities ul li {
      font-family:'Open Sans', sand-serif;
      padding: 3px 0px;
      font-size: 20px;
      color: #222;
  }
  </code></pre>
  
  <p>I want the text in the middle of the page to be justified, but when I justify or left align it, it aligns it to the absolute left again. How do I do this without using fixed paddings or margins? Basically what I want is what they have on this page here(see the 'about us' section): <a href="http://www.villagebicycle.co.za/" rel="nofollow">http://www.villagebicycle.co.za/</a></p>
  
  <p>Note: I am using a fluid layout, so fixed paddings etc won't work</p>
  
  <p>Thank you</p>