フレックスボックスでコンテンツを中心にセンタリングするときのキャレットの位置

Question

OSX Chrome 45でテストしたところ、​​はコンテンツ用に機能していますが、下の空の編集可能アイテムをクリックすると入力を開始するまでキャレットの位置が中央になりません。

これを上部/下部平衡パディングで解決する唯一の方法はありますか、またはこれをピクセルシフトなしで動作させる方法がありますか？おかげ

[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

ジェームズ・ドネリーはコメントで言ったように、あなたはあなたのルールに行の高さを追加してみてくださいすることができ、例えば：私は実際にはおそらく一緒に行きたいしかし

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

代わりにpaddingcontenteditable要素にmin-heightを追加することは、カーソルと入力された値の間の問題を引き起こしています。 min-heightを取り除くと、問題は解決します。次に、このcontenteditable要素のまわりに均等にスペースを追加するにはどうすればいいですか？ - それは正確に何パディングである以上のような:)

ので、おそらく何かのため：

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

はあなたがが実装しようとしている正確に何に依存し、あなたが本当にの高さを修正する必要があるかどうかdiv。