Can’t get image to center

Nice site – which image are you trying to center?

Sorry, thought that was clear ??
When you check a post (e.g. https://sp-renders.net/blog/?p=170) the image in there aren’t centered, although they all have the centered alignment tag in them.

(also, thanks on the comment ;))

I just viewed source on your code, and while I do not have the answer, I’m curious:

<h3>Completed vexel</h3>
<p><img class="aligncenter" title="SuperWinnie" src="https://www.sp-renders.net/images/vexeltut/completed.png" width="271" height="357" alt="SuperWinnie" /><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />

<br />
</br></p>
<p></br><br />
<br />
</br><br />
<br />
</br></p>

What’s with all the line breaks?

Also, you might try going to html view and doing this:

<p class="aligncenter">

on the paragraph tag that contains your image. But really, the best thing you could do is to stop using whatever it is that puts all those breaks in there – if you’re pasting from Word, paste it into Notepad first then into WordPress, and use the toolbar buttons on the editor for any formatting.

When you post only an image, without any text, into a post and aligning it center, does it work?

I need the line breaks so that my text comes underneath the images and not next to them.
I need to make everything in Html since using the WYSIWYG editor does no good.

aligning doesn’t work (added those html tags before)
it centers in the WYSIWYG editor but when I click publish, it’s simply up to the left so I assume it has to do with the skin’s CSS somehow.

You should get them right if you’re going to use them – a line break is written as <br />, not as </br>.

That accounts for only a few of the 35 errors you get at the w3.org validator. If you clean up your code, you have a better chance of spotting what’s wrong.

In your theme you have a directory called “css” and in that directory is a style sheet called layout.css. Open that and find the following:

div.comment img{float:left;padding:4px;border:#DDD 1px solid;margin:5px 20px 15px 0;}

Change it to the following:

div.comment img{padding:4px;border:#DDD 1px solid;display:block;margin-left:auto;margin-right:auto;}

See if that helps.

Sorry…dup post.

Actually, the tag using the forward stroke is only required when used in a document using an XHTML doctype. Otherwise, the standard “br” minus the forward stroke will suffice.

I can’t write those tags in this post, for some reason it’s not showing up, even with the code tag. However, br is never written as </br> .

Well, the code by figaro worked (and now I can delete the br’s as well since I have huge gaps now :P)

One thing is off though, the thumbnails that I have on my index are also centered now and I don’t quite know how to get them on the right again…
(They are used as extra field to a post)

And on taking a second look, it also centers images that I had set to align to the left, so that may be why my thumbs are also centering?

perhaps an edit to that former code by Figaro is needed?

Maybe delete that line entirely, so you can align images within the post?

No, can’t do that since that removes the lines that come around the images then.

It does bring the thumbs back to the left of course, but the text doesn’t auto-wrap around them either then. So deleting the line isn’t an option ??
Thanks for the input though!

if you want to align an image to the left or right, then use float:left; or float:right; on the container of the image. if you want to center an image, then you should use margin:0 auto;

why don’t you define a few basic classes in your stylesheet like:

.left{float:left}
.right{float:right}
.center{margin:0 auto}

then you just need to add the class to whatever you want to float or center