在 td 中的 contenteditable div 中垂直对齐文本，其中 div 与 td 大小相同

如何解决在 td 中的 contenteditable div 中垂直对齐文本，其中 div 与 td 大小相同

我有一个带有 div 的 td 和一些文本。 div 应具有 td 的高度和宽度的 100%，并且文本应垂直和水平居中。有时我想使用跨度对 div 中的文本进行格式化，但可能会发生文本太长而导致多行的情况。

我尝试使用 flexBox，但这会使文本在有跨度时换行。还尝试将 div 放在 div 中，并且只在父 div 上使用 flexBox，但这也不起作用。我还尝试将 div 设置为“显示：表格单元格”，但这使 div 无法填充整个单元格。所以现在我真的不知道该尝试什么了。

表格单元格：

td {
    border: 1px solid #d9d9d9;
    height: 16pt;
    padding: 0;
    min-width: 100px;
}

单元格中带有文本的 Div：

.cellText {
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

解决方法

将以下代码行添加到您的 .cellText CSS 类：

display: flex;
align-items: center;
justify-content: center;

然后在您的 div 实例中添加一个 .cellText 元素并将您的文本内容放在那里。

示例

td {
    border: 1px solid #d9d9d9;
    height: 16pt;
    padding: 0;
    min-width: 100px;
}

.cellText {
    display: flex;
    align-items: center;
    justify-content: center;
  
    height: 100%;
    text-align: center;
    vertical-align: middle;
}


/* For testing purposes */
td {
  width: 500px;
  height: 150px;
}

<table style="width:350px">
  <tr>
    <th>Title</th>
    <th>Title</th>
  </tr>
  <tr>
    <td>
      <div class="cellText">
        <div>
          <span>First span</span> <span>Second span</span> <span>Third span</span> <span>Fourth span</span>
        </div>
      </div>
    </td>
    <td>
      <div class="cellText">
        <div>
          Lorem ipsum dolor sit amet,consectetur adipiscing elit..
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="cellText">
        <div>
          Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vestibulum commodo,purus ac vestibulum dapibus.
        </div>
      </div>
    </td>
    <td>
      <div class="cellText">
        <div>
          Lorem ipsum dolor sit amet.
        </div>
      </div>
    </td>
  </tr>
</table>