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.
in aligncenter class add text-align:center
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:
And in the page’s header:
Notice the
style='cursor:pointer'
, which changes the mouse’s cursor to a ‘hand’ cursor.To avoid an additional
div
container or even JavaScript, you can make the anchor display as a block:.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<a href="#" class="logo"><img src="logo.png" alt="Logo" /></a>
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn’t figure it out without using a div.
The solution I found. Adding
/></a>
and width and height to the anchor tag cuts down the hyperlink to the image…Second answer:
paste this in
functions.php
Down side, this won’t effect already inserted images…
Also if you can please move the style of the
<p>
to the stylesheet.