在 contenteditable 中以 flexbox 居中时的插入符号位置 [英] Caret position when centering with flexbox in contenteditable

问题描述

在 OSX Chrome 45 上测试，align-items: center; 适用于内容，但如果您点击下方空白的可编辑内容，插入符号位置不会居中，直到您开始输入.>

是使用顶部/底部平衡填充来解决此问题的唯一方法，还是有一种方法可以在不移动像素的情况下使其正常工作?谢谢

[contenteditable="true"] {边框:1px 实心#ddd；显示:弹性；对齐项目:居中；最小高度:46px；}[contenteditable="true"]:focus {大纲:无；}

<div contenteditable="true"></div><div contenteditable="true">内容居中，但插入符号不是</div>

解决方案

正如 James Donnelly 在评论中所说，您可以尝试将 line-height 添加到您的规则中，例如:

[contenteditable="true"] {边框:1px 实心#ddd；显示:弹性；对齐项目:居中；最小高度:46px；行高:46px；}

但是我实际上可能会使用 padding 代替.将 min-height 添加到您的 contenteditable 元素是导致光标和输入值之间出现问题的原因.去掉min-height，问题就解决了.然后你的问题变成了我如何在这个 contenteditable 元素周围添加均匀的空间?"- 这正是填充的用途:)

所以也许更像:

[contenteditable="true"] {边框:1px 实心#ddd；显示:弹性；对齐项目:居中；填充:15px 0;}

这取决于您究竟要实现什么，以及您是否真的需要修复 div 的高度.

Tested on OSX Chrome 45, align-items: center; is working for content, but if you click into the empty editable below, the caret position is not centered until you start typing.

Is the only way to fix this with top/bottom balanced padding or is there a way of getting this to work without pixel shifting? Thanks

[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>

解决方案

As James Donnelly said in the comment, you can try adding line-height to your rules, eg:

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

However I'd actually probably go with padding instead. Adding the min-height to your contenteditable element is what's causing the issues between the cursor and the inputted value. Take away the min-height, and the problem is solved. Then your problem becomes "How do I add an even amount of space around this contenteditable element?" - and that's exactly what padding is for :)

So perhaps something more like:

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

Depends on what exactly you're trying to implement though, and whether you really need to fix the height of the div.

这篇关于在 contenteditable 中以 flexbox 居中时的插入符号位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！