title: How to place cursor position at the start of center aligned placeholder of contenteditable element?
body: <p>I have the following piece of code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="title" contenteditable="true" placeholder="Title"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.title {
     width: 500px;
     margin: 0 auto;
     text-align: center;
  }
  
  [contenteditable=true]:empty:before{
     content: attr(placeholder);
  
  }
  </code></pre>
  
  <p>It results in a center-aligned editable div with a placeholder. My problem is that when the element is first focused the cursor is positioned at the start of the div, as opposed to where the placeholder is: !<a href="http://screencast.com/t/66HWb3wKiV" rel="nofollow">http://screencast.com/t/66HWb3wKiV</a></p>
  
  <p>I want the placeholder to remain visible until a character is actually typed, with the cursor positioned at the start of the placeholder. How would I be able to do this?</p>
  
  <p>Thanks!</p>