Support » Themes and Templates » [Resolved] Alignment of captions / titles with images

[Resolved] Alignment of captions / titles with images

  • How do I solve the problem where the Image and caption are mis-aligned in Std WP postings.

    I checked the forums and found where a prev release of WP changed the caption syntax and some themes were broken as a result.

    Surely, the 2012 theme should work with std WP.

    I do not want to manually enter HTML code etc at posting.

    I have a child theme where I can apply CSS changes if I knew what changes to apply.
    Here is a link. http://mattobrienblogcom.fatcow.com/matt_blog/?p=485

Viewing 15 replies - 1 through 15 (of 18 total)
  • I also didn’t like the way images were aligned in Twenty Twelve.

    I used:

    .wp-caption .wp-caption-text,
    .entry-caption {
    	text-align: center;

    Hope that helps.

    I really appreciate your response.

    However, I have not managed to get this to work.

    Did you just paste this into the bottom of your child style.css.

    Yes, I did. It seems like that something else is affecting how your captions are displayed. After inspecting your website with Firebug, it shows that the image “alt text” is not being displayed. Instead, you are writing the caption underneath the image and that’s not how it’s supposed to work.
    Here’s what it shows on your website:

    <img width="400" height="400" src="http://mattobrienblogcom.fatcow.com/matt_blog/wp-content/uploads/2013/01/E_101_68951.jpg" alt="Alt Text xxx" class="size-full wp-image-367 ">

    alt=”Alt Text xxx” is your caption. Whatever you write between those quotes is what is going to be displayed under your image. You can find that option when you are adding a new image to a post.
    I hope It makes sense.

    I am stripping my child theme css down to bare bones and re-applying it item by item to check if individual items are still needed. (simple spacing, etc… to reduce white space in twentytwelve).

    When I finish that exercise I will revisit your comments as some behavior may be influenced by my frequent child css changes ongoing this afternoon.

    I look forward to looking at your answer in more detail then, when I will have less variables to contend with.

    Thanks again.

    That’s a great idea. You should definitely find the problem that way.
    Good luck.

    Lee, I have posted screen grabs of the posting / problem image at this link.


    1. Caption entry screen.
    2. View of posting in Text View
    3. Link to sample posting
    4. Screen grab of caption to the right.

    I do not fully understand the point you have made above. I am not trying to modify html in a posting, just figure out how to get a Caption under a Picture (separate from any other posting text, say describing the picture) using standard WP [Should i be using a better tool / Theme]

    I hope you have time to look at this. I was delighted to get your response and about to test your suggestion again.


    I completely understand what you are saying and it’s very odd that is happening. At first I thought you just didn’t like the way the captions are aligned in the theme.

    If you have disabled all modifications in the child theme and the problem is still present than it must be something else. Have you tried disabling plugins? You should also try completely removing your style.css from your child theme (just back it up first).

    If all the above fails than I recommend you start from scratch because it should not be happening. I have been playing with Twenty Twelve on my sandbox and have never ran across the problem you are describing.




    Forum Moderator

    Re-upload a fresh, unpacked, copy of the Twenty Twelve folder to wp-content/themes using FTP or whatever file management application your host provides.

    And reset the plugins folder by FTP or phpMyAdmin

    I just noticed you have a plugin managing the pictures in your gallery page. Have you tried disabling it?

    Hi Lee,

    I will try that. This problem with captions was there a long time before the picture gallery plug-in, but it might be interfering with your suggestions above. A valid point.

    However, I have now approached it from another perspective.

    Have a look at this posting.


    You will notice
    1. I have a properly formatted caption formatted and placed under the image (exactly as I have specified in CSS).

    2. The extensive description has been pulled automatically from the jpg metadata (as has the caption, which WP does not allow you do).

    3. The Location (ex jpg metadata)

    4. Copyright (ex jpg metadata).

    I have not entered any of this data using WP editor or a replacement editor, but I have posted a single short code in a std WP posting. I manage my images in Lightroom, apply the metadata there. I have now an automated process to export from Lightroom . This is very close to what I have been striving at for months.

    I have wasted 2 full days dealing with the WP caption mess. It is absolutely amazing that this problem exists with such themes as 2012.

    I will go back later and explore the WP caption problem, but cannot afford to spend any time on it right now.

    I really appreciate your help and will return to this, purely out of stubbornness to get to the bottom of it. I will post here when I crack it. HTML / CSS is not my scene and this is hard, frustrating work for me. Thanks yet again.



    Forum Moderator

    Either there is something seriously wrong in your child theme, you have edited the parent theme or one of your plugin is causing a problem. I have examined the source markup being generated on your site for captioned images and it is nothing like the code that WordPress usually generates when using the 2012 theme.

    Correct output:
    <div style="width: 445px" class="wp-caption aligncenter" id="attachment_786"><a rel="attachment wp-att-786" href="http://deity:8080/wordpress/2008/06/post-format-test-image-attached/boat-2/"><img width="435" height="288" class="size-full wp-image-786" title="boat" alt="boat" src="http://deity:8080/wordpress/wp-content/uploads/2011/01/boat.jpg"></a><p class="wp-caption-text">A picture is worth a thousand words</p></div>

    Your output:
    <div class="caption"><img width="400" height="400" src="http://mattobrienblogcom.fatcow.com/matt_blog/wp-content/uploads/2013/01/E_101_68951.jpg" alt="Alt Text xxx" class="size-full wp-image-367 "> Caption xxx</div>

    They’re not even remotely the same.

    I have been working backwards thru my email. So, sorry if these are a bit out of sequence.

    Esmi, I downloaded several fresh themes last night and had the same experience. I did not reset the plug-ins (only using 1)… but it might be the problem. I also checked with the Plug-In developer, who advised me a few days ago it was a WP / Theme issue.

    Anyway, for the moment I cannot spend any more time on this… but very curious to understand the root cause at the same time. i will return to this problem as soon as I can.



    Forum Moderator

    The original 2012 theme works just fine. That’s where I copied the correct output code from.


    I have also tested using 2012 and no child. However, to be fair, I should do a fresh test from absolute scratch. I am more knowledgeable now than when I started. I will try again when I get the chance.

    Please update us when you figure it out.


Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘[Resolved] Alignment of captions / titles with images’ is closed to new replies.