title: Vertical align caret in contenteditable span (inline-block) webkit browsers
body: <p>I have form made with contenteditable spans and my problem is that on focus my span is not vertical align better said the caret is not in the middle of span. I would like to have it in the middle and fully visible but also with scalable width so span should not be a dispaly: block neither inline.</p>
  
  <p><strong>Picture</strong>   : <a href="http://i62.tinypic.com/125kri8.jpg" rel="nofollow">http://i62.tinypic.com/125kri8.jpg</a> This is the issue i want it in the middle but also the caret must be fully visible</p>
  
  <p><strong>DEMO</strong> : <a href="http://jsfiddle.net/hqf8apwr/" rel="nofollow">http://jsfiddle.net/hqf8apwr/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;form action=""&gt;
    &lt;ul class=form-input&gt;
     &lt;li&gt;
      &lt;span class="input-span" contenteditable="true" data-width=30 data-placeholder="Vaše meno"&gt;&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;span class="input-span" contenteditable="true" data-width=30 data-placeholder="Spoločnosť"&gt;&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;span class="input-span" contenteditable="true" data-width=30 data-placeholder="Pracovná pozícia"&gt;&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;span class="input-span" contenteditable="true" data-width=30 data-placeholder="Telefónne číslo"&gt;&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;span class="input-span" contenteditable="true" data-width=30 data-placeholder="Emailová adresa"&gt;&lt;/span&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> li {
     list-style: none;
   }
   form {
     text-align: center;
     position: relative;
     left: -100px;
   }
   form &gt; ul {
     margin: 0 auto;
   }
   form &gt; ul &gt; li {
     height: 60px;
     line-height: 60px;
     display: inline-block;
     font-size: 1.2em;
   }
   form .form-label {
     text-align: right;
     padding-right: 25px;
     color: black;
  }
  form .form-input {
     text-align: left;
     width: 200px;
     position: absolute;
     top: 0;
  }
  form .form-input li {
     height: 60px;
  } 
  form .form-input span {
     font-size: 1em;
     border-bottom: 2px solid orange;
     padding: 15px 20px;
     margin-bottom: -20px;
     white-space: nowrap;
     display: inline-block;
     height: 20px;
     line-height: 20px;
     max-width: 260px;
     overflow-x: hidden;
     background: #fff;
     color: #000;
  }
  form .form-input span.input-span[contenteditable]:focus {
     display: inline-block;
     font-size: 1em;
     padding-top: 20px;
     padding-bottom: 40px;
     overflow: hidden;
     background: orange;
     color: #fff;
     margin-top: 2px;
     padding-bottom: 20px;
  }
  form .form-input span.input-span[contenteditable]:empty::before {
     content: attr(data-placeholder);
  }
  form .form-input span.input-span[contenteditable]:empty:focus::before {
     content: '';
  }
  </code></pre>