Caret centering position with flexbox in content

Question

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

Is the only way to fix this with the top / bottom balanced padding, or is there a way to get this to work without pixel displacement? 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> 

Answer 1

As James Donnelly said in a comment, you can try adding a line to your rules, for example:

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

However, in fact, I will probably go with padding . Adding min-height to your contenteditable element is what causes problems between the cursor and the entered value. Remove the min-height and the problem is resolved. Then your problem will be “How to add an even amount of space around this contenteditable element?”. - and this is exactly what to fill out :)

So maybe something more:

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

Depending on what exactly you are trying to implement, and whether or not you really need to set the height of the div.