将div放在表格单元格的中心，但将文本向左对齐

Question

我有一个包装器/列表numpy.flatten，并在其中列出了项flattened_list = [y for x in arr for y in x]。 ul元素具有li，而ul元素具有display: table-row;。我现在遇到的问题是，我想将li元素居中于列表的中心，但将文本对齐到左侧display: table-cell;元素内。

代码看起来像这样

li

li

有人知道我如何解决这个问题吗？

Answer 1

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

您想要类似的东西吗？

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

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