Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   [SOLVED] Centring images with CSS? (http://forum.bytesforall.com/showthread.php?t=17055)

Dapizz Mar 18, 2012 12:20 PM

[SOLVED] Centring images with CSS?
 
The title sort of says it all, but this is really confusing me. I go into the the Style Images section and add:

Code:

margin-left: auto;
margin-right: auto;

As far as my web searching goes, this should essentially centre all the images affected, all the images in my posts/pages. Instead it only applies to images in sticky posts. Look here. If you look at the sign image in the sticky post you can see it's centred, but if you scroll down the page to the other image (Ctrl + F, paste in "February 3rd, 2012") it is not quite so. This is really beginning to bug me... Any help appreciated. :)

-Dapizz

juggledad Mar 18, 2012 01:02 PM

how were the two images added to the posts?
what HTML is involved in the two images? What surrounds them?

lmilesw Mar 18, 2012 02:57 PM

For margin auto to work in centering the element being centered needs a width supplied. I am not sure how you would go about centering all images. That is generally done when you add an image you just select center as the alignment.

Dapizz Mar 19, 2012 12:38 PM

Quote:

Originally Posted by juggledad (Post 82090)
how were the two images added to the posts?
what HTML is involved in the two images? What surrounds them?

Juggledad,
1) Using the image adder at the top of the post 'kitchen'. HTML wise, just an IMG tag and an SRC.
2) The same. Like mentioned above.
3) if you mean HTML, there's no centre tag around either. I checked but did notice that written inside the IMG tag there was:
Code:

class="size-full wp-image-13 aligncenter"
I know I never added this manually, so I'm not sure how it got there. It isn't on the other image, so I guess that's what's happening. if this is so, couldn't I go to ATO>Add CSS/HTML Inserts and add something along the lines of:
Code:

img { size: full; align: center; }
Thanks for the reply. :)

Dapizz Mar 19, 2012 12:41 PM

Quote:

Originally Posted by lmilesw (Post 82096)
For margin auto to work in centering the element being centered needs a width supplied. I am not sure how you would go about centering all images. That is generally done when you add an image you just select center as the alignment.

LMilesW,
Both images do have width and height specified in the HTML. I did, however, notice that only the second image was linked in an A tag if this would make any difference.
Thanks, :)

juggledad Mar 19, 2012 02:36 PM

The images weren't added teh same way because one is just an <img> (with the class 'aligncenter' in a <p> while the other is an <img> (with NO class assigned) in a <a> in a <p>

add 'class="aligncenter"' to the second image

Dapizz Mar 19, 2012 03:01 PM

OK, thanks. Just wondering if there was an easy way. Lucky I only have a few images on my blog. I'll have to remember for the the future. :) Thanks for all the help though.


All times are GMT -6. The time now is 01:10 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.