Центр div внутри ячейки таблицы, но выравнивание текста по левому краю

Question

У меня есть оболочка / список ul и внутри него элементы списка li.Элемент ul имеет display: table-row;, а элемент li имеет display: table-cell;.Теперь у меня проблема в том, что я хочу центрировать элемент li внутри списка, но выровнять текст внутри элемента li слева.

Код выглядит так

.list-wrapper {
    display: table;
    margin: 0;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

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

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

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

<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">
      <a class="item-link">
        Text over more lines. Align me left but my parent centered.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Also centered.
      </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">
        Text.
      </a>
    </li>
  </ul>
</div>

У кого-нибудь есть идеи, как мне решить эту проблему?

Answer 1

Попробуйте это :)

.list-wrapper {
    display: table;
    margin: 0;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

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

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

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

.alignLeft{
	text-align: left;
}

<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">
      <a class="item-link">
      Here is someText textover more lines. <p class="alignLeft">Align me left but my parent centered.</p>
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
      Here is someAlso textcentered. 
 <p class="alignLeft">Align me left.</p>
    </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Here is some text. <p class="alignLeft">Align me left.</p>
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
      Here is some textText. <p class="alignLeft">Align </p>
 me left.
    </a>
    </li>
  </ul>
</div>

Answer 2

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

.list-item {
    display: table-cell;
}

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

Answer 3

Непонятно, что вам нужно делать.Может быть, вы можете попробовать это.

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

Answer 4

Хочешь что-нибудь подобное?

.list-wrapper {
    display: table;
    margin: 0;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

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

.list-item {
    display: table-cell;
	padding-right:2%;
	padding-left:2%;
}

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

<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">
      <a class="item-link">
        Text over more lines. Align me left but my parent centered.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Also centered.
      </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">
        Text.
      </a>
    </li>
  </ul>
</div>