title: Is there a way to get an explicit warning message from Chrome, not just a yellow triangle?
body: <p>When I view the following HTML5</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
      width: 250px; height: 150px;
      background-color: #ddd;
      margin: 5px;
  }
  .vcent {
      vertical-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
      &lt;img class="vcent" src="icon.svg" /&gt;
  &lt;/div&gt;
  
  &lt;div class="box"&gt;
      &lt;a href="index.html"&gt;&lt;img class="vcent" src="icon.svg" /&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>using Chrome (78.0), and with the following <code>icon.svg</code></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="30pt" height="15pt" viewBox="0 0 300 150" version="1.1"&gt;
      &lt;g id="surface1"&gt;
          &lt;rect x="20" y="20" rx="10" ry="10" width="260" height="110" /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I get a yellow-triangle warning</p>
  
  <p><a href="https://i.stack.imgur.com/GJUKC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GJUKC.png" alt="yellow triangle warning from Chrome"></a></p>
  
  <p>signaling that Chrome rejected the styling.</p>
  
  <p>In this case Chrome is unhappy because I used <code>center</code> rather than <code>middle</code>.</p>
  
  <p>Is there any way to determine <em>why</em> Chrome rejected the styling? Can I get an explicit warning message "<code>center</code> is not allowed for this style", for example? (Does any other HTML5 IDE provide more helpful messages?)</p>
  
  <p>I'm at this moment trying to increase my autonomy, and so I'm, metaphorically, trying to learn how to fish on my own. If you see the issue and can provide a fish in the form of how to get the icon centered—in the presence or the absence of an <code>a</code> tag—please do. I'm sure after <a href="https://www.w3schools.com/css/css_align.asp" rel="nofollow noreferrer">wrestling</a> with the centering issue (for this nth time) I'll figure it out.</p>