How can you left justify list items in a unordered list that is centered within a div?

Question

I have a div within a div within a div:

<div id="wrapper" class="center">
    <div id="content" class="center">
        <div id="listDiv" class="center">
           <ul>
               <li><a href='#' id="1" >Link one</a> </li>
               <li><a href='#' id="2" >Link 2</a> </li>
               <li><a href='#' id="3" >Link three</a> </li>
           </ul>
        </div>
    </div>
</div>

In my style sheet, I have a class that centers each div within the page, and centers things within the div:

div.center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

I would like my unordered list to remain centered in the div, but for each list item to be left justified below the other. Everything I have tried centers the list items to each other. What am I missing?

Answer 1

May be, you want this. SEE THE DEMO

To achieve what you want, you have to give display: table; to your div.

div.center {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

ul {
  text-align: left;
}

Answer 2

Just add

ul {
  text-align: left;
}