Center div inside table call but align text left

I have a wrapper/list ul and inside it list items li. The ul element has display: table-row; and the li element has display: table-cell;. The problem I have now is that I want to center the li element inside the list but align the text inside the li element on the left.

The code looks like this

.list {
    display: table-row;
    width: 100%;
}

.list-item {
    display: table-cell;
    text-align: center;
}

.item-link {
    text-align: left;
}

<ul class="list">
  <li class="list-item">
    <a class="item-link">
      Here is some text. Align me left.
    </a>
  </li>
  <li class="list-item">
    <a class="item-link">
      Here is some text. Align me left.
    </a>
  </li>
  <li class="list-item">
    <a class="item-link">
      Here is some text. Align me left.
    </a>
  </li>
  <li class="list-item">
    <a class="item-link">
      Here is some text. Align me left.
    </a>
  </li>
</ul>

Does anyone have an idea how I can solve this problem?