Центрирайте курсора върху фокуса в съдържанието на div Редактируемо (центрирано хоризонтално и вертикално)

Имам таблица с много textarea (вече променени на div с атрибут contentEditable), също така с CSS направих, че innerHTML е центрирано хоризонтално и също вертикално. Всичко работи добре, само едно нещо не е наред - когато въведете div, така че е фокусирано, курсорът е в горния ляв ъгъл, но когато започнете да пишете, той се премества в центъра.

Как мога да направя така, че когато фокусирате div, курсорът да е точно в центъра?

Вижте демонстрация тук

Благодаря много.

РЕДАКТИРАНО: Съжалявам, по моя грешка, не работи само във Firefox.


jquery css firefox contenteditable
person Legionar    schedule 14.08.2014    source източник
comment
Проверих демонстрацията ви и тя работи точно както искахте. Използвате ли IE?   -  person Nischaal Cooray    schedule 14.08.2014
comment
Забравихте да споменете важна информация: в кой браузър виждате поведението, което описахте? Тъй като го тествах в Chrome и работи добре: ако щракна някъде в клетка на таблица, курсорът е в центъра на клетката.   -  person David Ferenczy Rogožan    schedule 14.08.2014
comment
проблемът просто възниква в така наречения FireFox. Така че не мисля, че трябва да коригирате този малък бъг, който само ще притеснява потребителите на FireFox (които също са ограничени в количество).   -  person King King    schedule 14.08.2014
comment
Да, това е вярно, но повечето мои потребители използват тази таблица във Firefox :-/   -  person Legionar    schedule 14.08.2014

Отговори (1)


arrow_upward
2
arrow_downward

Във FF трябва да нулирате своя div към inline-box и regulr vertical-align, така че да стои в средата на клетката: ДЕМО

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

Трябва също да коригирате вашия valign към td: vertical-align:center; не съществува :)

.terminy td {
    text-align: center;
    vertical-align:middle;/* fixed with a valid value*/
    height: 60px;
    background-color: #fff;
}
person G-Cyrillus    schedule 14.08.2014
comment
демонстрацията работи, но на моя уебсайт, когато го фокусирате, курсорът е на около 10 пиксела надолу от средата :-/ - person Legionar; 14.08.2014
comment
@Legionar също ли нулирахте вертикалното подравняване и поправихте ли вашия CSS за td? - person G-Cyrillus; 14.08.2014
comment
Да, и двете, и няма друг CSS, който да го разбие - person Legionar; 14.08.2014
comment
height: auto; това е същото на моя уебсайт, както ще бъде height: 0px; - същият резултат, около 10 пиксела надолу от центъра. Затова го промених на height: 20px; и сега е точно в центъра. Не знам защо не работи с auto, а в jsfiddle работи... - person Legionar; 14.08.2014
comment
вероятно от нулиране някъде другаде :) - person G-Cyrillus; 14.08.2014
comment
не не, премахнах всички други CSS, просто оставете същото като в jsfiddle; но няма значение, сега работи, благодаря :) - person Legionar; 14.08.2014