Need help? Check out our Support site, then


Aligning images and captions

  1. Hello -

    When I insert an image into my visual editor, they look great. Aligned how I want it, caption centered, encased in a grey box.

    However, when I publish, they look awful! No matter what I do for spacing, the image is always too close or too far from the text. The worst part is the captions - they are aligned left and look silly. I'm sure there must be a simple HTML answer for this, can any expert help my amateurish looking blog look its best?

    Here is an example of what I mean:

    http://theamericanworker.wordpress.com/2010/02/05/rockefeller-questions-obamas-loyalty-to-coal/

    The blog I need help with is theamericanworker.wordpress.com.

  2. I'm using a Firefox 3.5.8 browser and what I see is the Depo Square theme. In the post I see a single image that does not have a gray caption box around it at all. I see an image and the caption text below it against the white theme background. The theme I use Vigilance displays images and captions in the same way - no gray box.

  3. I forgot to say that viewed through my browser the caption is not left aligned. It is centered under the image. Which browser and version of it are you using?

  4. oh wow interesting - the caption is centered?? firefox 3.5.8

  5. time thief, do you have any insight on why we are using the same browser but mine looks like this:

    -----IMG-----
    If Governor Paterson can withstand calls to resign, he may be able to see through the start of "the largest solar initiative in State history."

  6. panaghiotisadam
    Member

    @mialamarnyu: In almost all wp.com themes, captioned images are enclosed in a light grey bg. DePo square is one of the very few exceptions. Unfortunately, captioned images use a shortcode, which is an instruction for a predetermined fromula you cannot alter. If you want to simulate the way captioned images show up in other themes, you'll have to insert plain, not captioned, images, and use this code:

    <table align="left" style="border:solid 1px #cdcdcd;background-color:#eeeeee;width:IMAGE_WIDTH_HEREpx;margin-right:10px;">
    <tr><td>IMAGE_CODE_HERE</td></tr>
    <tr><td align="center">CAPTION_TEXT_HERE</td></tr>
    </table>

    You can change the color of the frame and/or the background, if you wish.

    I don't understand what you mean by "the image is always too close or too far from the text". Try the above code first, and let me know if and what you'd like to change.

Topic Closed

This topic has been closed to new replies.

About this Topic