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

Posted 2023-03-06

【中文标题】垂直对齐 td 中 contenteditable div 中的文本，其中 div 与 td 大小相同

【英文标题】：Vertically align text in contenteditable div in td where the div is same size as td

【发布时间】：2021-07-04 19:36:12

【问题描述】：

我有一个带有 div 的 td 和一些文本。 div 应具有 td 的 100% 的高度和宽度，并且文本应垂直和水平居中。有时我想使用 span 格式化 div 中的文本，但可能会发生文本太长，因此会出现多行。

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

表格单元格：

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

单元格中带有文本的Div：

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

【问题讨论】：

请查看为什么以及如何制作：minimal reproducible example 和：***.com/help/how-to-ask

【参考方案1】：

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

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

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

示例

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>

【讨论】：

一旦我将内部 div 设置为可编辑，它会将其大小设置为文本大小：jsfiddle.net/Ltgc0usn。如果我 cellText 是可编辑的，它就可以工作。但是当我删除所有文本时，内部 div 被删除，当我下次插入 span 时，它看起来不正确：jsfiddle.net/32sqdboj