title: How to vertically center text next to a radio button
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set" /&gt;&lt;label for="radio-1-set"&gt;&lt;/label&gt; Driving
  &lt;br /&gt;
  &lt;input type="radio" class="regular-radio" name="radio-1-set" id="radio-2-set" /&gt;&lt;label for="radio-2-set"&gt;&lt;/label&gt; Public Transit
  &lt;br /&gt;
  &lt;input type="radio" class="regular-radio" name="radio-1-set" id="radio-3-set" /&gt;&lt;label for="radio-3-set"&gt;&lt;/label&gt; Walking
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>     label {
      display: inline;
  }
  .radio-1 {
      width: 193px;
  }
  .button-holder {
      float: left;
      margin-left: 6px;
      margin-top: 16px;
  }
  .regular-radio {
      display: none;
  }
  .regular-radio + label {
      background-color: #fafafa;
      border: 2px solid #cacece;
      border-radius: 50px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
      display: inline-block;
      padding: 11px;
      position: relative;
  
  }
  .regular-radio + label:before {
      background: none repeat scroll 0 0 #FDFDFD;
      border-radius: 50px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
      content: " ";
      font-size: 36px;
      height: 8px;
      left: 7px;
      position: absolute;
      top: 7px;
      width: 8px;
  }
  .regular-radio:checked + label:after {
      background: none repeat scroll 0 0 #94E325;
      border-radius: 50px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
      content: " ";
      font-size: 36px;
      height: 8px;
      left: 7px;
      position: absolute;
      top: 7px;
      width: 8px;
  }
  .regular-radio:checked + label {
      background-color: #e9ecee;
      border: 2px solid #adb8c0;
      color: #99a1a7;
      padding: 11px;
  }
  .regular-radio + label:active, .regular-radio:checked + label:active {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
  }
  </code></pre>
  
  <p>Shows this: <a href="http://jsfiddle.net/71vn4uhk/" rel="nofollow">http://jsfiddle.net/71vn4uhk/</a></p>
  
  <p>How can I modify the CSS, so that the text line up vertically next to each radio button and add a little padding left of the text.</p>