当在contenteditable中以flexbox居中时的Caret位置

Question

在OSX Chrome 45上测试，align-items: center;适用于内容，但是如果单击下面的空白可编辑区域，则插入符号将不居中，直到您开始键入。

是使用顶部/底部平衡填充修复此问题的唯一方法，还是有一种无需像素移位即可使其正常工作的方法？谢谢

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    min-height: 46px;
}

[contenteditable="true"]:focus {
    outline: none;
}

<div contenteditable="true"></div>
<div contenteditable="true">content is centered, but caret isn't</div>

Answer 1

正如詹姆斯·唐纳利（James Donnelly）在评论中所说，您可以尝试在规则中添加行高，例如：

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    min-height: 46px;
    line-height: 46px;
}

但是实际上我实际上可能会选择padding。将min-height添加到contenteditable元素是导致游标与输入值之间出现问题的原因。拿走min-height，问题解决了。然后，您的问题变成“如何在contenteditable元素周围添加均匀的空间？” -这正是填充的目的：）

所以也许更像是：

[contenteditable="true"] {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 15px 0;
}

取决于您到底要实现什么，以及是否真的需要固定div的高度。

Answer 2

只需将line-height: 150%设置为您的内容可编辑的div

<< [but如果要设置font-size，则应注意，应与line-height成比例地计算font-size，以使插入符号垂直居中]