title: How to center-align image link and make it clickable only on image not overflowing area?
body: <p>I created a image link:-</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>    .post-image {
        margin: 20px auto;
        display: block;
        max-width: 100%;
        height: auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;a href="example.com/link"&gt;
         &lt;img class="post-image" src="https://i.stack.imgur.com/gKSXt.jpg" /&gt;
      &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the link is clickable outside the image also.</p>
  
  <p>How can I center-align the image and also make the link clickable only on the image not outside the image (overflowing area).</p>
  
  <p><a href="https://i.stack.imgur.com/7rC2A.jpg" rel="nofollow noreferrer">Centered image</a></p>