title: Trouble centering input in label
body: <p>I'm using bootstrap's radio buttons and modifying the style.  I can't seem to get the text on these buttons to vertically center.  I've tried setting the content margin to 0px and setting align-content to center and vertical-align to middle.  Also text-align: center.  What do I do?</p>
  
  <p>Here's the Html:</p>
  
  <pre><code>&lt;div class="root"&gt;
      &lt;div class="btn-group" data-toggle="buttons"&gt;
          &lt;label class="btn btn-default active form-check-label"&gt;
              &lt;input class="form-check-input" type="radio" checked autocomplete="off"&gt; One
          &lt;/label&gt;
  
          &lt;label class="btn btn-default form-check-label"&gt;
              &lt;input class="form-check-input" type="radio" autocomplete="off"&gt; Two
          &lt;/label&gt;
  
          &lt;label class="btn btn-default form-check-label"&gt;
              &lt;input class="form-check-input" type="radio" autocomplete="off"&gt; Three
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
  
  .root .btn-group .btn {
      border-radius: 0;
      border-color: black;
      background-color: white;
      color: black;
      box-shadow: none;
      min-width: 90px;
      height: 45px;
      align-content: center !important;
      vertical-align: middle !important;
      text-align: center;
  }
  
  .root .btn-group .btn .form-check-input {
      text-align: center;
      vertical-align: middle;
      margin: 0px;
  }
  
  .root .btn-group .btn.active {
      background-color: black;
      color: white;
  }
  </code></pre>