Need help? Check out our Support site, then


Code for center image with right aligned caption

  1. I use quite a bit of imagery on my blog, photos, illustrations, etc. For the most part, I prefer the image centered with a right aligned caption. The template I use is chaotic soul.

    For the last few months, an earnest young guy has been helping me with html and css coding, which, admittedly, is not my area of expertise. He has sent table codes, div class caption codes (forgive me -- I know there are more appropriate names like one and two cell). He has concluded that Firefox is the problem. That he can render exactly what I requested -- a center image with a right aligned caption in every browswer BUT Firefox. In the meantime, I have been centering captions under the centered images, but would prefer to have the caption right aligned under the centered image. Can anyone solve this for me?

  2. Visual Editor tested:
    `<div style="padding: 0pt; width: 200px"><br /> <img src="xyz.jpg" height="300" width="200" /><br /> <div align="right">caption</div><br /> </div>`
    Make sure that the width of the Image matches the div's width. Otherwise the caption won't align with the right side.

  3. And please leave out the backticks () I'm still struggling with the proper method of posting code on the forums.

  4. What you might want to do is design a table with three columns, put the image in the center, and the caption in the right. Leave the left blank.

  5. deltafoxtrot:

    You're a genius. And thank you for pointing out the width variable as being important. What I did was simply change the width variable following the div style to match the image I had and it worked perfectly.

    And Raincoaster,
    If I could design a table I would, but I'm not that sophisticated in coding.

    At the risk of alienating either of you, let me ask this. Maybe you can solve this for me: Here's a test I just did with a table (that was done for me) that I used once before that worked.

    <table class="caption_right">
    <tr>
    <td><img src="http://eaesthete.wordpress.com/files/2008/03/jack.jpg" alt="jack.jpg" /></td>
    </tr>
    <tr>
    <td>ffffound </td>
    </tr>
    </table>
    <p align="left"> </p>

    The specifics of this can be found at http://eaesthete.wordpress.com/wp-admin/post.php?action=edit&post=2690 Or Test 3 Under drafts. As you can see, the caption is fine, but the image is not centered.

    Yet in the original of this, which can be found at:
    http://theerrantaesthete.com/2008/03/14/2462/

    the image appears more centered. I'm trying to understand what throws it off in one case and not another. I like using tables since the caption is smaller and tucked under the image, and since I use this format most frequently, I'm trying to find something that I can use repeatedly with good results.

  6. I can't see your edit screen (for a good reason, it's your blog not mine). So I cannot comment on that.

    And I'm not that much of a genius that I could hack my way into your blog. :)

  7. Actually I believe raincoaster misunderstood your question (no offense intended) since his solution would result in the caption appearing right of the image not beneath.

    Sincere apologies if I got you wrong, RC.

  8. Deltafoxtrot,

    Thank you for trying to solve this for me and you could very well be right on raincoaster's solution. And no, I don't think you're getting me wrong. Let me ask you this: I feel sure you can see the original, without hacking into my blog and demonstrating to the group at large, how effortless it might be. Right? So the link below is readily available to you.

    http://theerrantaesthete.com/2008/03/14/2462/

    If you were to recreate exactly what you see there in code, how would it look? Centered image, right aligned text, tucked tight and small under the image within the confines of the width.

  9. You're catching me right before bedtime (It's 2AM for me) so I won't dive into the code to crack this riddle tonight. I'll get back to this thread tomorrow.

    Just one thing: I was apologizing to Raincoaster

    OK, two things: The a building on the pic, the Jewish Museum Berlin, is really impressive. I've been there several times.

  10. You're right: that's what I thought was being asked. I promise not to answer any more questions till I've had my coffee.

  11. Deltafoxtrot,

    Not only are you coming to my aid in trying to resolve this code issue for me, but it turns out you also identified something I could not - the location of the picture (which apparently is the Jewish Museum in Berlin) designed by Daniel Libeskind. Thank you! I've already noted it in my blog. Any further thoughts on cracking the "riddle" of my code dilemma?

  12. OK, if you want to work with tables, you can use this code:

    <table cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td align="center"><img src="mypicture.jpg" width="200px" height="100px" alt="mydescription" /></td>
    </tr>
    <tr>
    <td align="right">My caption</td>
    </tr>
    </table>

    Of course you have to insert the actual size of your picture

  13. Thanks for weighing in isadora, I avoid at HTML tables as much as I can.

  14. Actually you can leave that align="center" away :-)

  15. deltafoxtrot, I only suggested it because I understood that easthete wants to use tables for some reason. Of course I'd use divs, too - but it's not my blog :-)

  16. Isadora,

    Thank you for picking up this thread. Trust me, I don't know enough to know which is better. Tables or divs. The reason I preferred the table was due to the caption. It was smaller in size and tucked under the image very nicely. If I could achieve that with a div, all the better.

    In fact, here was a code that worked for me a couple of months back using div. The caption was small and tucked. The image centered.

    <div class="caption">
    <div><img src="http://farm1.static.flickr.com/31/102463794_6db9a83ef9.jpg?v=0" height="500" width="500" />
    Grand Central [
    Flickr]</div>
    </div>

    But when I tested it yesterday, it wiped out the sidebar. Here is the link:
    http://theerrantaesthete.com/2008/02/24/sunday/

    If you could make this work, that would be great.

  17. @eaesthete - Isadora has forgotten more about code than I've learned and I suspect the same is true of deltafoxtrot. However, sometimes I need to use tables in my blogs so I take the path of least resistance: I create them in Windows LiveWriter and copy/paste the code.

    It's effortless that way.

  18. This one reduces the caption's font size. You can adjust the size by changing the em value.

    <div style="padding: 0pt; width: 200px">
       <img src="xyz.jpg" height="300" width="200" style="margin: 0pt; padding: 0pt" alt="" />
       <div style="margin: 0pt; padding: 0pt; font-size: 0.7em" align="right">caption</div>
    </div>

    @ellaella: *blush*

  19. ellaella, you're welcome to show us a code example and to correct my mistakes. I also don't code tables by hand on my blog anymore: I use a bookmarklet which I wrote for this purpose.

  20. Mistakes??? That was a compliment, Isadora! Read it again. :)

  21. I'm not here to quarrel, but only to help. I don't consider myself infallible and I always appreciate suggestions and corrections. That code works in my test blog and I truly can't see the mistake, but I'd be happy if you could show it to me - it's never too late to learn.

    If you refer to the fact that it does not validate because of the cellspacing and cellpadding attributes, I know they are not part of the xhtml 1.0 strict standard, but they take care of displaying the table properly also in older browsers.

  22. Isadora: This "forgot more than I know" thing may sound strange to us but I happen to know that it is meant as huge compliment.

  23. That's right; it's an idiomatic English expression that means we know so little relative to you that our knowledge might as well be meaningless. Ella does NOT mean there is an error.

  24. ellaella, I guess I have to apologize and that I have to work a bit harder at my language skills. :-(

    deltafoxtrot, thanks, I got it, now...

    raincoaster, thanks to you, too, I suppose this is one of those idiomatic expressions I will never forget anymore...

  25. Thanks, rain and deltafoxtrot.

    Isadora - you are so fluent it never entered my mind that you might not know that idiom. It was indeed high praise.

  26. Thanks to all for brokering your differences in a thoughtful, humorous and meaningful way. I, too, was not familiar with that expression, but like it for its nuance. I appreciate all of you for taking your time to help out a struggling blogger who knows next to nothing about code, but I'm trying to learn.

    If you don't mind, I'd like to add this little discovery to the mix in my quest for perfection in finding a code for center image with right aligned caption. You can see the one time the goal was accomplished.

    http://theerrantaesthete.com/2008/02/24/sunday/

    The above used this code ...
    <div class="caption">
    <div><img src="http://farm1.static.flickr.com/31/102463794_6db9a83ef9.jpg?v=0" height="500" width="500" />
    Grand Central [Flickr]</div>
    </div>

    ... but when I tried it with a different image, I could never duplicate. Now I know why. The grand central station at night was the perfect image size for the chaotic soul template 500 x 500. The other night, I tried an image that was smaller and got a different result - image was not centered, but caption WAS right aligned. When I stretched the image to 500 x 500 it duplicated exactly what I was looking for. What does this tell me? Does it even help me? Do I have to distort all images to get perfect center alignment?

  27. Ooops. Sorry for repeating myself. I see I already posted this code (grand central) image some time back.

  28. I suggest you go with the method, I came up with first. It basically creates a box (if you fill in the right values) that is as wide as the contained image and aligns the caption exactly with the right side.

Topic Closed

This topic has been closed to new replies.

About this Topic