Center UL But Keep Text Left Aligned

Here is what I'm trying to achieve, text is centered but starting at the same point: http://gi.zaley.in:8080/14/11/04/5459047ac35cd/N5459048577c8c.png What I've got: http://gi.zale

Solution 1:

do something like this:

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

jsfiddle

Solution 2:

Try this:

._unstyled_ _left_ {
    text-align: center; 
}

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