将焦点对准div div contentEditable（水平居中和垂直居中） [英] Center cursor on focus in div contentEditable (centered horizontally and vertically)

问题描述

我有许多 textarea 的表（已经改成 div 的属性 contentEditable ），也用CSS我做了 innerHTML 水平和垂直居中。一切正常，只有一件事是不行的 - 当你输入 div ，所以它的焦点，光标在左上角，但是当你开始写它的移动

我该怎么做，当你关注 div 时，光标会在右边中心？

请参阅此处演示

非常感谢。

编辑：
抱歉， ，它不能只在Firefox中工作。

解决方案

在FF中，你需要将div重置为内联框和regulr vertical-对齐，以便它站在单元格的中间： DEMO

  .termin：focus {/ *只有一次聚焦，否则没有空白点击* / 
 height：auto; 
 width：auto; 
 display：inline-block; 
 vertical-align：top; 
 
 $ / code> 

您需要修正您的valign to td：vertical-align：center;不存在：）



  .terminy td {
 text-align：center; 
 vertical-align：middle; / *使用有效值固定* / 
 height：60px; 
 background-color：#fff; 
} 
  




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.

解决方案

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

这篇关于将焦点对准div div contentEditable（水平居中和垂直居中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！