中心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; 
}