對齊文本中心，然後離開

Question

美好的一天

我想對齊div中間的文本。現在，使用text-align很容易：以父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; 
} 

我想在頁面中間的文本是合理的，但是當我證明或左對齊它，它再次將它對齊到絕對左側。我如何在不使用固定襯墊或邊距的情況下做到這一點？基本上我想要的是他們有什麼這個頁面放在這裏（見「關於我們」一節）：http://www.villagebicycle.co.za/

注：我使用的是彈性佈局，以固定墊襯等將無法正常工作

謝謝

Answer 1

將寬度設置爲width:400px等特定尺寸後，您需要將容器與margin:0 auto對齊。然後使用text-align分別對齊每個元素。如果你希望你的容器有100％的寬度則不要使用text-align:center到父divhttp://jsfiddle.net/DvXzB/16/

：

看到這個演示。相反，根據需要使用width:100%（可選）和每個塊再次使用text-align。

Answer 2

您必須使用包裝 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>