Выравнивание текстового центра, а затем слева

Question

Добрый день

Я хочу выровнять текст в центре div. Теперь это легко с помощью text-align: center на родительском div.

Но если я хочу, чтобы выровнять текст внутри div слева от центрированного div, как мне это сделать?

Смотрите мою скрипку: http://jsfiddle.net/DvXzB/5/

HTML:

<div id="aboutContent" class="row-fluid"> 
    <div id="aboutHeaderText" class="span12"><span title="">About Us</span></div> 
    <div id="aboutHeaderBody" class="span12"> 
     <p><a title="">asdasd</a> is a free mobile application available for <a href="#" 
      title="">iOS</a>, <a href="#" title="">Android</a>and the <a href="#" title="">Blackberry</a> operating 
      systems.</p> 
     <p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k 
      l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p> 
     <div id="cities"><a title="">asdasdasd</a> currently only displays events and 
      specials in <strong>asdasd</strong> (our hometown), but the following locations 
      will be available before you know it: 
      <ul> 
       <li><span>asdg</span> 

       </li> 
       <li><span>asdwn</span> 

       </li> 
       <li><span>Pasdasdroom</span> 

       </li> 
       <li><span>Dasdaf</span> 

       </li> 
       <li><span>Bergrin</span> 

       </li> 
       <li><span>Sersch</span> 

       </li> 
       <li><span>Graergwn</span> 

       </li> 
      </ul> 
     </div> 
     <p>Visit our <a href="" title="" target="_blank">Facebook page</a> for more 
      up to date information, and feel free to <a href="" title="">contact us</a> with 
      any queries.</p> 
     <br /> 
    </div> 
</div> 

CSS:

#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; 
} 

Я хочу, чтобы текст в середине страницы, чтобы быть оправданным, но когда я оправдываю или левой выровнять его, он снова выравнивает его с абсолютным левым. Как это сделать без использования фиксированных paddings или полей? В основном то, что я хочу, это то, что у них есть на этой странице здесь (см «о нас» раздел): http://www.villagebicycle.co.za/

Примечание: Я использую макет жидкости, поэтому фиксированные отступы и т.д. не будет работать

Спасибо

Answer 1

Вам необходимо центрировать выравнивание контейнера с помощью margin:0 auto после установки его ширины до определенного размера, например width:400px. Затем выровняйте каждый элемент отдельно, используя text-align.

Смотрите эту демо: http://jsfiddle.net/DvXzB/16/

Если вы хотите, чтобы ваш контейнер, чтобы иметь ширину 100%, то не использовать text-align:center для родителя div. Вместо этого используйте width:100% (необязательно) и снова text-align каждый блок по желанию.

Answer 2

Вы должны использовать wapper div, чтобы наделить весь контент. Я сделал JsFiddle, Я думаю, это то, что вы ищете :)

.wraper { 
    position: relative; 
    width: 500px; 
    margin:0 auto; 
} 

Afther, что вы можете выровнять <p> влево, вправо, обосновывать и т.д., как вы можете увидеть:

p.left{text-align:left;} 
    p.justify{text-align:justify;} 

И HTML для тестирования:

<div class="wraper"> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 

    <p class="justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 

</div>