Caret Position beim Zentrieren mit Flexbox in contenteditable

Question

Getestet auf OSX Chrome 45, align-items: center; funktioniert für Inhalt, aber wenn Sie in die leere bearbeitbare unten klicken, wird die Caret-Position nicht zentriert, bis Sie mit der Eingabe beginnen.

Ist der einzige Weg, um dies mit oberen/unteren ausgeglichenen Polsterung zu beheben oder gibt es eine Möglichkeit, dies ohne Pixelverschiebung zu arbeiten?

Dank

[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

Als James Donnelly im Kommentar sagte, können Sie line-height, um Ihre Regeln versuchen Sie, zum Beispiel:

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

Allerdings würde ich tatsächlich wahrscheinlich gehen mit padding stattdessen. Hinzufügen der min-height zu Ihrem contenteditable Element ist, was die Probleme zwischen dem Cursor und dem eingegebenen Wert verursacht. Nehmen Sie die min-height, und das Problem ist gelöst. Dann wird Ihr Problem "Wie füge ich einen gleichmäßigen Platz um dieses contenteditable Element hinzu?" - und das ist genau das, was Polsterung ist für :)

Also vielleicht etwas mehr wie:

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

Hängt davon ab, was genau obwohl implementieren Sie versuchen, und ob Sie wirklich die Höhe der Notwendigkeit zu beheben div.