Posizione del cursore quando si centra con la flexbox in contentabile

Question

Testato su OSX Chrome 45, align-items: center; funziona per il contenuto, ma se si fa clic sul modificabile vuoto sottostante, la posizione del cursore non è centrata finché non si inizia a digitare.

È l'unico modo per risolvere questo problema con l'imbottitura bilanciata superiore/inferiore o esiste un modo per farlo funzionare senza lo spostamento dei pixel? Grazie

[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

Come ha detto James Donnelly nel commento, si può provare l'aggiunta di line-height per le regole, ad esempio:

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

Tuttavia mi piacerebbe in realtà probabilmente andare con padding invece. L'aggiunta di min-height all'elemento contenteditable è ciò che causa i problemi tra il cursore e il valore immesso. Porta via lo min-height e il problema è risolto. Quindi il tuo problema diventa "Come posso aggiungere una quantità di spazio intorno a questo elemento contenteditable?" - e questo è esattamente ciò imbottitura è per :)

Quindi, forse qualcosa di più simile:

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

dipende da che cosa esattamente si sta cercando di attuare, però, e se si ha realmente bisogno di fissare l'altezza del div.