Need help? Check out our Support site, then


WordPress.com Forums » Support

Code for center image with right aligned caption

  1. eaesthete
    Member

    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. deltafoxtrot
    Member

    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. deltafoxtrot
    Member

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

  4. raincoaster
    Member

    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. eaesthete
    Member

    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. deltafoxtrot
    Member

    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. deltafoxtrot
    Member

    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. eaesthete
    Member

    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. deltafoxtrot
    Member

    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. raincoaster
    Member

    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. eaesthete
    Member

    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. isadora
    Member

    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. deltafoxtrot
    Member

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

  14. isadora
    Member

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

  15. isadora
    Member

    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. eaesthete
    Member

    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. ellaella
    Member

    @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. deltafoxtrot
    Member

    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. isadora
    Member

    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. ellaella
    Member

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

  21. isadora
    Member

    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. deltafoxtrot
    Member

    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. raincoaster
    Member

    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. isadora
    Member

    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. ellaella
    Member

    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. eaesthete
    Member

    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. eaesthete
    Member

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

  28. deltafoxtrot
    Member

    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

Tags