center an image with a link on it

1 Views

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:

Read More
<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.
enter image description here

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.

Post Views: 1

Related posts

Leave a Reply

6 comments

  2. I’m not familiar with wordpress, but you might want to try setting the image’s and the anchors’s css ‘display’ property to ‘inline-block’.

    If you are limited in changing the document’s DOM, another option is adding an ‘onClick’ attribute to the image.
    This will allow you to run some function once the image is clicked.
    So, for example, if you want to redirect to another page:

    <img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>

    And in the page’s header:

    <script type='text/JavaScript'>
    var myRedirect = function(){
        window.location.href = 'Some other location';
    }
</script>

    Notice the style='cursor:pointer', which changes the mouse’s cursor to a ‘hand’ cursor.

  4. it still incorporates a div, but the way i do it is:

    <div class="megaman">
<a href="img/megaman.jpg"><img src="img/megaman.jpg" alt="megaman"></a>
</div>



img {
height: 125px;
width: 200px;
}

.megaman{
text-align: center;
margin: 0 auto;
display: block;
}

    And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn’t figure it out without using a div.

  5. The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image…

    <a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>

  6. 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.