How to Center Image in Column?
-
I want to shrink down an image and put it in the center of the page / column. I tried the following:
The image displays but it left aligns. How do I center it?
The blog I need help with is: (visible only to logged in users)
-
See here please > http://en.support.wordpress.com/visual-editor/#alignment
The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.
Align-left means position left, with the rest of the content wrapping around the right side of the image.
Align-right means position right, with the rest of the content wrapping around the left side of the image.
Align-center means position center, with no wrap-around (= the rest of the content below the image).
If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.
To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
<div style="clear:both;"></div> -
The link you provide is for centering *text*. I want to center *just the image*. I have text above the image and text below the image, no text to right or left of image.
What does <div style=”clear:both;”></div> do? I tried to put that after the
<img />
<div>sequence but it did nothing.
-
How do I insert a literal “< a >” in my questions here? It is being interpreted as a markup tag
-
To center or change picture alignment – in Visual Editor – click on image then click on the left box (not the one with the red slash on it – the slash will delete the picture from the Post / Page)
When you are in the picture editor – can’t remember which tab – but click on the box that says center. remember to save changes
-
<div style=”clear:both;”></div> – clear and start over after an image
When you want text to start after an image
-
Are you accustomed to working in the Text ie. HTML editor?
If so then there’s an example of center alignment of an imagae I embedded into a post on my private test blog so you can examine the code.<a href="http://leosquared.files.wordpress.com/2013/06/4morepieces1.png"><img class="size-full wp-image-2325 aligncenter" alt="4morepieces" src="http://leosquared.files.wordpress.com/2013/06/4morepieces1.png" width="146" height="147" /></a>P.S. To make code display here you need to place it between code tags.
-
Selecting Center in the Visual Editor tool worked as you suggested. But the actual markup tag it creates uses the align=”middle” attribute on the IMG tag that I was already inserting by hand. It looks like my attribute is being ignored and the real align attribute is hidden behind the scenes. Kind of ugly….
Regarding DIV tag, I never had text encroaching on the image. Is it considered good practice to always insert DIV tags after images, regardless?
-
timethief, it looks like your code uses a newer method for alignment of image. The key part of your code is the IMG tag attribute:
class=”size-full wp-image-2325 aligncenter”Can you point me to documentation for this class attribute and I’ll probably figure it out from there. So bottom line is never use the Align= attribute and always use Class=?
-
I use the div tag I posted above when I have text along side an image – such as in a how to do it set of instructions and the text stops part way down the picture and I want the next text to start alongside the next image –
As to the code for center – I just use the built in stuff and do as little html fine tuning as possible
-
auxclass, the Visual Editor image tool let me insert a caption, and the CAPTION tag has an attribute align=”aligncenter” yet the caption is NOT centered. Is that attribute just ignored?
-
If you want to center an image, then “align=”middle” does not mean anything.
You need to use aligncenter in the text editor.
<img class="aligncenter size-full" alt="" src="http://LINK_TO_IMAGE" width="#px" height="#px" />Or if you use the visual editor, then choose the aligncenter option when you insert the image.
The place you can edit the image alignment looks like this:
http://en.support.files.wordpress.com/2009/08/edit_image_settings.png?w=688If you are using aligncenter with an image then there is no need to use any “clear:both” code because whatever size image you insert will force the text or succeeding images below on their own lines. You only need that “clear:both” code if you have, for example, an image alignleft paired with some text (or another image alignleft) and then want more text or images below them on their own lines. Sort of like what auxclass said:
<div style=”clear:both;”></div> – clear and start over after an image
-
I just looked at the code on a post I made on a blog that I admin – the captions were all centered on the pictures – and did not matter if the picture was left aligned or center aligned – the caption was attached to the picture and centered on the pictures –
beyond that never messed with the picture code – I have always been able to do what I needed with the standard Visual Editor and the stock Picture tools
-
-
Mike,
Yes the caption code is attached to the images.
You may have been lucky with how that works, and it usually does work in the visual editor. But it can get messed up very easily and I’ve answered many questions about how to fix it. I think you are very careful about how you insert captions, but …Anyway, this OP is asking about a centered picture with text following it.
None of us can really see what he’s doing because it’s a private site. We are all pretty much “guessing” about what’s going on.
Hey! You have a nice holiday, okay?
-
Yikes! that may have come out wrong: we were typing at the same time I think. I was not contesting any info you gave…
-
-
Hi Tess – if the OP want text as not part of the image – then that is different from what I referenced –
yes I am very careful – but I have broken the editor from time to time – usually when trying to add text after a link or an image – then I need to go into the html editor and fix where the text was inserted – that is also why you will see me add extra text lines (I use “z” for the first character of a line / paragraph) – then I delete the extra “z” before I publish the Post – helps keep me from getting new text inside the formatting code
-
Full size is the whole width of your image, or the full width of your content container on your theme. Best practice is to upload the image to the size you want to display for the most clear images. Check on the theme showcase what is the maximum width you can display.
You can certainly upload smaller images, smaller than “size-full” allowed as well. If your theme allows 700px and you upload a 300 px image then the “size-full” image will be only 300 px wide.
Your site is private, so we volunteers cannot see what you are doing, what theme you are using, or details about what you might be doing “less than the best” practice.
- The topic ‘How to Center Image in Column?’ is closed to new replies.
WordPress.com Forums 
