用 css 初始化 contenteditable div 游标的垂直对齐

Question

我有以下内容：

  #container {
    background-color: #ddd;
    width:150px;
    height: 150px;
    display: grid;
    vertical-align: middle; text-align: center;
    align-items: center;
  }
  #container:focus {
      align-items: center;
      vertical-align: middle; 
      text-align: center;
  }

<div id='container' contenteditable="true">
</div>

我想让光标初始化在 div 容器的中心。目前，它从顶部 (Chrome) 或底部 (Firefox) 开始。一旦我开始打字，它就会集中起来。

如何使用 css 初始化 contenteditable div 光标的垂直对齐方式？

Answer 1

使用 display:table-cell;，它应该比 grid 更好用（似乎只适用于 Chrome）

#container {
  background-color: #ddd;
  width: 150px;
  height: 150px;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}

<div id='container' contenteditable="true">
</div>

一个 hacky 的想法，让它在你需要 div 为空的地方与 Firefox 一起工作：

#container {
  background-color: #ddd;
  width: 150px;
  height: 150px;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}

#container:empty {
  line-height:150px;
  padding-left:75px;
  box-sizing:border-box;
  text-align:left;
}

<div id='container' contenteditable="true"></div>

用 css 初始化 contenteditable div 游标的垂直对齐

Initialise the vertical alignment of contenteditable div cursor with css

html

css

vertical-alignment