title: How do I set the percent height of an icon, and vertically center it, while left-floating it?
body: <p>Centering in HTML with its varieties has of course been asked and answered
  <a href="https://stackoverflow.com/a/25185515/">innumerable</a>
  <a href="https://stackoverflow.com/a/39420535/">times</a>.</p>
  <p>Still, I'm having elementary issues.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.banner_box {
      width: 640px; height: 150px;
      background-color: #ddd;
      margin: 5px;
  
      display: flex;
      align-items: center;
  }
  .left_center_myicon {
      display: block;
      margin: 0 auto;
  
      float: left;
      /*height: 100%;*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="banner_box"&gt;
      &lt;img class="left_center_myicon" src="myicon.svg" /&gt;
  &lt;/div&gt;
  
  &lt;div class="banner_box"&gt;
      &lt;a href="index.html"&gt;&lt;img class="left_center_myicon" src="myicon.svg" /&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>where <code>myicon.svg</code> consists of one rectangle:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;
      xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
      width=&quot;30pt&quot; height=&quot;15pt&quot; viewBox=&quot;0 0 400 200&quot; version=&quot;1.1&quot;&gt;
      &lt;g style=&quot;fill:rgb(10%,40%,70%);fill-opacity:1;&quot;&gt;
          &lt;rect x=&quot;100&quot; y=&quot;50&quot; rx=&quot;20&quot; ry=&quot;20&quot; width=&quot;200&quot; height=&quot;100&quot; /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Despite that I am specifying <code>float: left</code> on both instances of <code>left_center_myicon</code>, it floats to the left only if it's inside an <code>&lt;a&gt;</code> tag.</p>
  <p>Now my icon is rather small. I can easily make it fill the height of <code>banner_box</code> by adding <code>height: 100%</code>. In the lower <code>banner_box</code> that of course makes the icon <code>100%</code> of just the anchor.</p>
  <p>How do I set the percent height of an icon, and vertically center it, while left-floating it?</p>
  <p>In short, I am able to either left-center an icon</p>
  <p><a href="https://i.stack.imgur.com/maB6A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/maB6A.png" alt="centering, not height adjusted" /></a></p>
  <p>or enlarge it to some percentage</p>
  <p><a href="https://i.stack.imgur.com/qPjea.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qPjea.png" alt="centering, not left floated" /></a></p>
  <p>but not both.</p>