This may sound like a really silly issue and for me, it certainly it but i am having trouble centering an image.

 

If you go to http://www.voltronik.com/blog/and take a look at the 150 Miles on a Brompton post, then you'll see a picture that is left aligned.

I have tried every combination of CSS i know to try to get it to center but it refuses too.

 

Please help me sort this ridiculous little problem!

The other images you have inside a <p> tag with text-align:center. The div class="entry" could have the style set to 'text-align:center' which should sort it out, or put it in a new div with 'width=100%' and 'text-align:center'

The other images you have inside a <p> tag with text-align:center. The div class="entry" could have the style set to 'text-align:center' which should sort it out, or put it in a new div with 'width=100%' and 'text-align:center'

 

Thanks for that. I edited the .entry class but this unfortunately screws up every other text-align setting i have for anything else in the content of my blog. I tried picking it all out by putting .entry ul, li, p {text-align: left;} but then i realised i had left out H1,H2,H3 and everything else that may be included in a post so that just isn't feasible to use.

 

I cannot put a div around the images as they are placed there via the functions.php file in Wordpress and are the featured image for that particular post.

 

This is the CSS i have been told to use to style the images but it hasn't worked.

 

.attachment-page-single {    float: left;    margin: 12px 8px 8px 0px;}.attachment-index-categories {    float: left;    margin: 12px 8px 8px 0px;}

 

This is the class that is applied to that image:

 

.attachment-index-categories {text-align:center;}

 

So maybe add the margin left and right to that, but again this may screw other stuff up.

 

.attachment-index-categories {text-align:center;

margin: 12px 8px 8px 0px;}

 

Edit: margin works but then its applied to all the other images so is no good either sorry.

 

.attachment-index-categories is the only class applied to that image, and I presume you cannot add a new class to it in the same way as you cannot put it into a new container (i.e. div). If you alter this class it alters them all so you cannot do that either - nasty problem.

 

If you cant fix it in css you could always make the image the right width with a transparent background but thats not ideal, maybe someone else with experience in WP may know. Its more of a WP issue than CSS as you dont have the control

No sure thanks.

 

These are the problems i am running into. Perhaps someone else will chime in later or something with their 2 cents.

I've tried things like .entry img {text-algn: center;} too but that doesn't work either. Not sure why but i'm sure there's some sort of inheritance issue there.

 

Thanks for your suggestions none-the-less. Should you think of anything else, please let me know!

No sure thanks.

 

These are the problems i am running into. Perhaps someone else will chime in later or something with their 2 cents.

I've tried things like .entry img {text-algn: center;} too but that doesn't work either. Not sure why but i'm sure there's some sort of inheritance issue there.

 

Thanks for your suggestions none-the-less. Should you think of anything else, please let me know!

 

div class entry is inheriting text-align:left from the #container, possible fix would be #container {text-align:center;} on that page

The only reason (most of) the other images seem centred is that they're the full width of the container. Easiest thing to do would be to make that one image the same width as the others.

The only reason (most of) the other images seem centred is that they're the full width of the container. Easiest thing to do would be to make that one image the same width as the others.

 

That is a solution for 1 case and not a solution for the others. The task here is not to resize images but to ensure good CSS practice and problem solving.

 

I like to fix problems at the source as opposed to find work arounds. If I fix the CSS now, I will never have this problem again where as I will have to upscale all smaller images in the future. Time saving longterm for a little effort short term.

That is a solution for 1 case and not a solution for the others. The task here is not to resize images but to ensure good CSS practice and problem solving.

 

I like to fix problems at the source as opposed to find work arounds. If I fix the CSS now, I will never have this problem again where as I will have to upscale all smaller images in the future. Time saving longterm for a little effort short term.

 

can you add this to your css

 

.entry img {display:block;margin:0 auto;
}

can you add this to your css

 

.entry img {display:block;margin:0 auto;
}

 

That, along with some minor CSS edits on my part, has worked! Thank you! And thank you to all others who helped

Its more of a WP effect than CSS as you dont have the check .If you cant fix it in css you could ever make the image the correctly width with a gossamer background but thats not ideal, maybe somebody else with have in WP may know.