Question

Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

And this (stripped down) HTML:

<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
    <img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>

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 display: block.

How can I center an image without using a parent div? I don’t want the whole area clickable.

Background:
You can read this topic. It is about WordPress and the built in editor. He automatically generates the class aligncenter 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.

Answer 1

Second answer:
paste this in functions.php

add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
    // only do this on center
    if($align == 'center') {
        $html = str_replace('aligncenter', '', $html);
        $html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
    }
    return $html;
}

Down side, this won’t effect already inserted images…
Also if you can please move the style of the <p> to the stylesheet.