title: Centering a link with image in HTML page
body: <p>I'm trying to center the image inside the link:</p>
  
  <pre><code>&lt;a href="URL"&gt;
     &lt;img class="my_class" src="SRC" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The css looks like:</p>
  
  <pre><code>.my_class
  {
    position:relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  </code></pre>
  
  <p>My problem is that the link can be pressed on the whole width of the page in the specific height and not only on my image. Also, my application needs to work with both directions: <code>dir:"rtl"</code> and <code>dir:"ltr"</code></p>