Pozycja opiekuna podczas centrowania z flexbox w contenteditable

Question

Testowany na OSX Chrome 45, align-items: center; pracuje dla zawartości, ale jeśli klikniesz w pustym edytowalnym poniżej, pozycja kurtyny nie będzie wyśrodkowana, dopóki nie zaczniesz pisać.

Czy to jedyny sposób, aby rozwiązać ten problem z wyrównaniem do góry/z dołu? Czy istnieje sposób, aby to zadziałało bez przesunięcia piksela? Dzięki

[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 powiedział w komentarzu, można spróbować dodać line-height się swoimi zasadami, np:

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

jednak bym faktycznie prawdopodobnie iść z padding zamiast tego. Dodanie elementu min-height do Twojego elementu contenteditable jest przyczyną problemów między kursorem a wprowadzoną wartością. Usuń min-height, a problem zostanie rozwiązany. Wtedy twój problem staje się "Jak dodać równą ilość miejsca wokół tego elementu contenteditable?" - i to jest dokładnie to, co jest dla dopełnienia :)

więc może coś więcej takich jak:

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

Zależy co dokładnie próbujesz wdrożenia choć i czy naprawdę trzeba ustalić wysokość div.