如何将光标位置放在contenteditable元素的中心对齐占位符的开头？

Question

我有以下代码：

HTML：

<div class="title" contenteditable="true" placeholder="Title"></div>

CSS：

.title {
   width: 500px;
   margin: 0 auto;
   text-align: center;
}

[contenteditable=true]:empty:before{
   content: attr(placeholder);

}

它会产生一个带有占位符的居中对齐的可编辑div。我的问题是，当元素首次聚焦时，光标位于div的开头，而不是占位符所在的位置：！http://screencast.com/t/66HWb3wKiV

我希望占位符在实际输入字符之前保持可见，光标位于占位符的开头。我怎么能这样做？

谢谢！

Answer 1

我有解决此问题的方法。

更改你的CSS：

.title {
   width: 500px;
   margin: 0 25%;
}