title: gwt Checkbox Text alignment
body: <p>I changed the check box style in gwt, but the text is not appearing in the middle (Vertically). It appears on the top. </p>
  
  <p><img src="https://i.stack.imgur.com/fgWCl.png" alt="enter image description here"></p>
  
  <p>I tried to add padding, but that didn't help. Adding padding to the left works fine, but padding to the top doesn't work.</p>
  
  <pre><code>label {
      display: inline-block;
      cursor: pointer;
      position: relative;
      padding-left: 25px;
      padding-top: 5px;
      margin-right: 5px;
      font-size: 12px;
  }
  
  input[type=checkbox] {
      display: none;
      padding-top: 5px;
  }
  
  label:before {
      background-image: url(images/csscheckbox.png);
      content: "";
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-right: 10px;
      position: absolute;
      left: 0;
      /*border-radius:5px 5px 0px 0px;*/
  }
  
     .gwt-CheckBox {
      padding-top: 5px;
  }
  
  .gwt-CheckBox label:before {
      padding-top: 5px;
  }
  
  input[type=checkbox]:checked+label:before {
      background-position: 0 -22px;
      background-image color: aqua;
      font-size: 12px;
      text-align: center;
      line-height: 13px;
  }
  
  .agreement {
      margin-left: 5px;
  }
  </code></pre>
  
  <p>What could be the problem?</p>