Как сосредоточить заполнитель карет в contenteditable - PullRequest
Новая
       14

Как сосредоточить заполнитель карет в contenteditable

0 голосов
/ 30 мая 2019

Я пытаюсь централизовать каркас-заполнитель по центру по вертикали и горизонтали в Firefox и Chrome, но он неправильно выравнивается в Firefox.

Как кажется:

https://i.imgur.com/3rqjGPU.jpg

Фактический код: 

.text {
    width: 200px;
    height: 200px;
    display: table;             
}
.text-ce {  
    font-family: 'Arial';       
    font-size: 24px;
    line-height: 1.3em;
    outline: none;
    text-align: center; 
    width: 200px;
    height: 200px;
    padding: 0 30px;
    user-select: text;
    word-wrap: break-word;
    word-break: break-all;          
    color: #FFF;
    display: table-cell;    
    vertical-align: middle;     
    position: relative;
    background-color: #C60;                             
}
[contentEditable=true]:empty::before{
    content:attr(placeholder);
    color: #CCC;     
}
[contentEditable=true]:focus:empty:before {
    padding-top: 85px;      
}

<div class="text">          
    <div class="text-ce" placeholder="Some text" contenteditable="true"></div>          
</div>

Если я добавлю padding-left вроде: 

[contentEditable=true]:empty {
    padding-left: 95px;   
}

Я получаю:

https://i.imgur.com/wijF02d.jpg

Как видите, я могу выровнять, но заполнитель идет не так, и это не правильно в Chrome, и я не знаю, как этого избежать.


Любая помощь приветствуется!

...