中心UL但保留文本左對齊

Question

這裏是我想要實現的，文本居中，但在同一時刻開始：

http://gi.zaley.in:8080/14/11/04/5459047ac35cd/N5459048577c8c.png

我有什麼：

http://gi.zaley.in:8080/14/11/04/545904daf36ef/C545904df5f484.png

因此，文字居中，但我怎樣才能使字幕從一個點開始？ （如第1圖）

<ul class="_unstyled_ _left_"> 
    <li> 
     <a href="#" class="-avatar _round_ _normal"> 
      <figure class="-thumbnail"> 
       <img src="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" alt="Krystalfister"> 
      </figure> 
     </a> 
     <p class="name">Random Guy</p> 
     <p class="points">9 876/10 000 points</p> 
    </li> 
    <li>i hate</li> 
    <li>goddamn</li> 
    <li>markup</li> 
    <li>go die</li> 
</ul> 

我沒有列出我的CSS這裏，因爲很明顯只是文本對齊：中心;

Answer 1

做這樣的事情：

ul { 
    text-align: left; 
    width: 100px; 
} 
li { 
    background-color: #ff00ff; 
    display: inline-block; 
    width: 100px; 
    padding: 0 20%; 
    line-height: 30px; 
} 

jsfiddle

Answer 2

試試這個：

._unstyled_ _left_ { 
    text-align: center; 
} 

._unstyled_ _left_ li { 
    text-align: left; 
}