中心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，因为它显然只是text-align：center;

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