插入位置时,使用flexbox在中心位置

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 的高度。