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元素周围添加均匀的空间？” - 这正是padding的用途：）

所以也许更像是：

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

取决于你究竟想要实现什么，以及你是否真的需要修正div的高度。

Answer 2

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

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

Answer 3

为了达到这个效果，元素的 line-height 必须设置为与元素高度相同的像素值。然后在 :focus 上，您可以将其更改为正常的行高。请参阅下面的片段。

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

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

[contenteditable="true"]:focus:not(:empty) {
    line-height:normal;
}

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

Answer 4

在我看来，您应该使用填充而不是最小高度和行高。如果固定该 div 的高度并不重要。因为填充它看起来也很干净。

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

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

4 个答案: