title: Vertically align an asterisk (*) with a label in an HTML Form
body: <p>On my form, I put an asterisk (*) behind a label to mark it as important.</p>
  
  <p>The problem is that it vertically aligned as top position by default. I am hoping that there's some way through which I can vertically align it as middle.</p>
  
  <p>This is how it looks:
  <img src="https://i.stack.imgur.com/QLGAV.jpg" alt="enter image description here"></p>
  
  <p>Notice the * to be top aligned. </p>
  
  <p>I tried this, but it doesn't work</p>
  
  <pre><code>.imp {
          display: inline-table;
          vertical-align: middle;
  }
  </code></pre>