Center cursor on focus in div contentEditable (centered horizontally and vertically)

问题

I have table with many textarea's (already changed to div's with attribute contentEditable), also with CSS I done that the innerHTML is centered horizontally and also vertically. Everything is working fine, just one thing is not OK - when you enter div, so its focused, the cursor is in the left top corner, but when you start writting its moved to the center.

How can I do, that when you focus the div, the cursor will be right in the center?

See demo here

Thanks a lot.

EDITED: Sorry, my fault, its not working only in Firefox.

回答1:

In FF you need to reset your div to an inline-box and regulr vertical-align so it stands in the middle of the cell: DEMO

.termin:focus{/* only once focused, else nothing to click on if empty */
    height: auto;
    width:auto;
    display:inline-block;
    vertical-align:top;
}

You need to fix your valign to td too : vertical-align:center; does not exist :)

.terminy td {
    text-align: center;
    vertical-align:middle;/* fixed with a valid value*/
    height: 60px;
    background-color: #fff;
}

来源：https://stackoverflow.com/questions/25304708/center-cursor-on-focus-in-div-contenteditable-centered-horizontally-and-vertica