title: How to vertically center a label on a range input
body: <p>This seems like it would be so simple but its giving me quite a bit of trouble. I've tried using <a href="https://stackoverflow.com/a/4466635/2382483">this method</a> already and it doesn't seem to work, as you can see here: <a href="http://jsfiddle.net/ENuLz/" rel="nofollow noreferrer">http://jsfiddle.net/ENuLz/</a>. Floating the label and the input seems to be a step in the right direction but I still can't quite figure it out.</p>
  
  <p>jsfiddle code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label for="myslider"&gt;Slider:&lt;/label&gt;
      &lt;input type="range" id="myslider" min="1" max="100" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>div {
      display: table-cell;
      vertical-align: middle;
      height: 50px;
      border: 1px solid red;
  }
  </code></pre>
  
  <p><strong>Solution:</strong> <a href="http://jsfiddle.net/ENuLz/17/" rel="nofollow noreferrer">http://jsfiddle.net/ENuLz/17/</a></p>
  
  <p>^This seems to work in the latest versions of chrome, firefox, and ie.</p>