title: Resolving `vertical-align: middle` for images + radio with this self contained example
body: <p>This question has been asked <a href="https://stackoverflow.com/q/28180543/704972">many</a> <a href="https://stackoverflow.com/q/1832016/704972">times</a> <a href="https://stackoverflow.com/q/13509883/704972">before</a>.</p>
  
  <p>The common answer is that it's sufficient to style with <code>vertical-align: middle</code>.</p>
  
  <p>Perhaps the problem is that none of these questions asked with a self-contained, complete example. SVG is a nice way to make the example self-contained, but the problem applies for any kind of image.</p>
  
  <p>After this long prelude, why does applying <code>vertical-align: middle</code> to both the radio group as well as to the SVG images not align them vertically to the middle?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;head&gt; 
      &lt;meta charset="UTF-8"&gt;
      &lt;style&gt;
          .myRadio .myradioG { vertical-align: middle; }        
          svg { stroke:black; stroke-width:5; opacity:0.5; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;label class="myLabel"&gt;
          &lt;input type="radio" name="radioGroup" class="myradioG"&gt;
          &lt;svg width="100" height="100" viewBox="0 0 100 100"&gt;
              &lt;circle cx="50" cy="50" r="30"
                  style="fill:blue;" /&gt;
          &lt;/svg&gt;
      &lt;/label&gt;
      &lt;label class="inline-radio"&gt;
          &lt;input type="radio" name="radioGroup" class="myradioG"&gt;
          &lt;svg width="100" height="100" viewBox="0 0 100 100"&gt;
              &lt;rect x="20" y="20" rx="15" ry="15" width="60" height="60"
                  style="fill:red;" /&gt;
          &lt;/svg&gt;
      &lt;/label&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Giving weight to the thousands of upvotes, this <a href="https://stackoverflow.com/q/489340/704972">Q</a> &amp; <a href="https://stackoverflow.com/a/489394/704972">A</a> suggest likewise that replacing the style above with this one:</p>
  
  <pre><code>&lt;style&gt;
      svg { stroke:black; stroke-width:5; opacity:0.5; vertical-align:middle; }
  &lt;/style&gt;
  </code></pre>
  
  <p>ought to work. It doesn't. Why?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I see from Michael's answer one potential source of confusion. I omitted to specify what I'm trying to vertically align (because my hunch is that it's poor styling to use image icons that are not already quite uniform—same height, same resolution, same line thicknesses—as you see here from the identical svg width/height/viewBox).</p>
  
  <p>I'd like to vertically align the radio buttons with the images.</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>If someone could add a brief comment to clarify why the present solution works, that would be nice. The discussions say "set vertical-align: middle to whichever element you're trying to vertically align". Here we're trying to vertically align the radio buttons to the images, not the other way around, and yet a correct solution is to apply "vertical-align: middle" to the images, not the radio buttons. Why?</p>