title: center an image with a link on it
body: <p>Is it possible to center an image only trough setting a class to the <code>img</code> tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS</p>
  
  <pre><code>.aligncenter {
      clear: both;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>And this (stripped down) HTML:</p>
  
  <pre><code>&lt;a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System"&gt;
      &lt;img src="/path/to/image.jpg" title="System" class="aligncenter"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS <code>display: block</code>.
  <img src="https://i.stack.imgur.com/cZJni.png" alt="enter image description here"></p>
  
  <p>How can I center an image without using a parent div? I don't want the whole area clickable.</p>
  
  <p>Background:
  You can read <a href="https://wordpress.stackexchange.com/questions/50638/center-image-aligncenter">this topic</a>. It is about Wordpress and the built in editor. He automatically generates the class <code>aligncenter</code> on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.</p>