Позиция Caret при центрировании с помощью flexbox в contenteditable

Question

Протестировано на OSX Chrome 45, align-items: center; работает с контентом, но если вы нажмете пустое редактируемое ниже, позиция каретки не будет центрирована до тех пор, пока вы не начнете вводить текст.

Это единственный способ исправить это с помощью верхней или нижней сбалансированной прокладки или есть способ заставить это работать без смещения пикселей? Благодаря

[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; 
} 

Однако я на самом деле, вероятно, пойти с padding. Добавление min-height в ваш элемент contenteditable - вот что вызывает проблемы между курсором и введенным значением. Уберите min-height, и проблема решена. Тогда ваша проблема будет «Как добавить ровное количество пространства вокруг этого элемента contenteditable?» - и это именно то, что обивка для :)

Так что, возможно, что-то еще, как:

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

Зависит от того, что именно вы пытаетесь осуществить, хотя, и действительно ли вам нужно исправить высоту дела.