title: How to middle vertical align a radio button against an image in html?
body: <p>I have multiple image of 100x100. I ask the user to choose one of them by putting an radio button before each of them.</p>
  
  <p>This is the code :</p>
  
  <pre><code>&lt;div&gt;
     &lt;input type="radio" name="pic" value="1"/&gt;&lt;img src="pic01.jpg"/&gt;&lt;br/&gt;
     &lt;input type="radio" name="pic" value="2"/&gt;&lt;img src="pic02.jpg"/&gt;&lt;br/&gt;
     ....
  </code></pre>
  
  <p>and so on... But the problem is that the radio button renders at the bottom of the line and I want to make it come in the vertical middle of the image. I have tried <code>style="vertical-align:middle"</code> and it does not work.</p>
  
  <p>Any ideas?</p>