表格单元格内的中心 div 但左对齐文本答案

【问题标题】：Center div inside table cell but align text left表格单元格内的中心 div 但左对齐文本
【发布时间】：2018-11-27 16:28:43
【问题描述】：

我有一个包装器/列表 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>

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

【问题讨论】：

如果你想把文字 inside 对齐，然后把text-align:center 放在 li 上。我不确定对齐列表中的项目是什么意思。你能分享你想要实现的截图吗？
如果您将text-align: center 应用于父元素，那么它将自动应用于子元素。
我已经编辑了我的问题，因为我的例子不够准确。也许现在很清楚我需要什么以及我的意思。表格内的元素居中，没关系。但文本也“居中”对齐，但我希望它左对齐。
您的.item-link 是内联元素，您尝试将text-align:left 应用于这些元素。但它们的宽度仅与它们的（文本）内容开始时一样宽，因此文本左侧和右侧的空间是零。在这种情况下，无论您将文本向左、向右还是居中“对齐”当然都没有区别。

标签： html css web alignment

【解决方案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>

【讨论】：

对不起，我的例子不够准确。我已经更新了代码。也许现在我想要什么已经足够清楚了。

【解决方案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>

【讨论】：

对不起，我的例子不够准确。我已经更新了代码。也许现在我想要什么已经足够清楚了。
这仍然令人困惑。似乎你想要居中和左对齐。
编辑了我的帖子，添加了填充，你可以检查一下吗？ @Cimoe

【解决方案3】：

不清楚你需要做什么。也许你可以试试这个。

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

【讨论】：

对不起，我的例子不够准确。我已经更新了代码。也许现在我想要什么已经足够清楚了。
你可以试试把css改成这样：.item-link { text-align: left;显示：内联块；垂直对齐：顶部； }

【解决方案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>

【讨论】：